Sections

Entrance animations

Entrance animations allow you to draw attention to important parts of your page or content.

Usage

After following the installation steps below, animations can be applied to any element by adding the data-animation attribute to an element. If you would like the animation to play on a loop, add the infinite class name.

Each of the examples below can be replayed by clicking on them.

Attention seekers

Show

data-animation="show"

Bounce

data-animation="bounce"

Flash

data-animation="flash"

Head shake

data-animation="head-shake"

Jello

data-animation="jello"

Pulse

data-animation="pulse"

Rubber band

data-animation="rubber-band"

Shake

data-animation="shake"

Swing

data-animation="swing"

Tada

data-animation="tada"

Wobble

data-animation="wobble"

Bouncing

Bounce in

data-animation="bounce-in"

Bounce in up

data-animation="bounce-in-up"

Bounce in right

data-animation="bounce-in-right"

Bounce in down

data-animation="bounce-in-down"

Bounce in left

data-animation="bounce-in-left"

Fading

Fade in

data-animation="fade-in"

Fade in up

data-animation="fade-in-up"

Fade in right

data-animation="fade-in-right"

Fade in down

data-animation="fade-in-down"

Fade in left

data-animation="fade-in-left"

Flipping

Flip in X

data-animation="flip-in-x"

Flip in Y

data-animation="flip-in-y"

Rotating

Rotate in up left

data-animation="rotate-in-up-left"

Rotate in up right

data-animation="rotate-in-up-right"

Rotate in down left

data-animation="rotate-in-down-left"

Rotate in down right

data-animation="rotate-in-down-right"

Zooming

Zoom in

data-animation="zoom-in"

Installation

Because not every theme will make use of entrance animations, you must add the required styles to your theme. This can be done by importing the animations Sass partial in the /theme/index.scss file and recompiling your CSS:

@import "utilities/animations";

Or by including the entrance-animations.css stylesheet in your document_head.hbs template:

<link rel="stylesheet" href="{{asset 'entrance-animations.css'}}">

The JavaScript required to fire the animations when the enter the viewport is contained within the snippet-animations.js file. You can copy and paste the code into your script.js file or alternatively include the file in your document_head.hbs template:

<script type="text/javascript" src="{{asset 'snippet-animations.js'}}"></script>