Esc

Entrance animations

Entrance animations play when a given element scrolls into view and allow you to draw attention to important parts of your page or content.

Examples

Entrance 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"

These effects are part of the Animations and Transitions extension which is included in every theme by default. If you’d like to remove the styles associated with these animations you can do so by removing the following line from the document_head.hbs template:

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

The associated JavaScript is added by the following line in the footer.hbs template:

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

If you’re using Sass, you can find the partials in the scss/plugins/animations folder and include them with the other theme styles by importing them in the scss/theme/index.scss file:

@import "plugins/animations";

Questions or feedback about this article? Let us know