General Animations

Slide Entrances

.slide-from-top

.slide-from-right

.slide-from-left

.slide-from-bottom

Fade Entrances

.fade-me-in

Sequential Grid Entrances

Fade Entrances

.fade-me-in

Come in Entrances

.come-in

Text Animations

get_animated_field();

Function situated in lib/elements.php
For use globally, across all blocks & templates.

CSS class animated_field must be used on string’s parent text tag for this to work.

Animated Heading Example 

// Plain string usage
<h1 class="animated_field">
<?php get_animated_field('Plain string');?>
</h1>
// ACF field usage
<h1 class="animated_field">
<?php get_animated_field(get_field('acf_field'));?>
</h1>
// ACF sub_field usage
<h1 class="animated_field">
<?php get_animated_field(get_sub_field('acf_sub_field'));?>
</h1>

PHP function situated in lib/elements.php
Critical CSS for letter entrance animation situated in css/animations.css
Critical JS script lettering.js (CDN) enqueued in functions.php

SVG Animation Framework

SVG Animations on Scroll

The SVG underneath this block will come in, automatically on scroll.

If you hit the button underneath that SVG, the other SVG will appear on button click.

+
+