Slide Entrances

.slide-from-top

.slide-from-right

.slide-from-left

.slide-from-bottom

Fade Entrances

.fade-me-in

Fade Entrances

.fade-me-in

Come in Entrances

.come-in

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 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.

Resources

Free Lottie Animations:
https://lottiefiles.com/animation/free

Interactivity Examples:
https://lottiefiles.com/interactivity

Lottie playing as default on page load

Lottie playing on scroll action

Lottie controlled on external button click