Animations and transitions

Add engaging animation and transition effects to elements.

On-hover animations

On-hover animations play when a visitor hovers over a given element.

Bob

"hover:bob"

Buzz

"hover:buzz"

Hang

"hover:hang"

Pop

"hover:pop"

Pulse grow

"hover:pulse-grow"

Push

"hover:push"

Wobble vertical

"hover:wobble-vertical"

Wobble to top right

"hover:wobble-to-top-right"

View all

Entrance animations

Entrance animations play when a given element scrolls into view.

Show

data-animation="show"

Bounce

data-animation="bounce"

Flash

data-animation="flash"

Pulse

data-animation="pulse"

Fade in up

data-animation="fade-in-up"

Flip in X

data-animation="flip-in-x"

Rotate in up right

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

Zoom in

data-animation="zoom-in"

View all

On-hover transitions

On hover-transitions take effect when a visitor hovers over a given element.

Forward

"hover:forward"

Float

"hover:float"

Sink

"hover:sink"

Grow

"hover:grow"

Shrink

"hover:shrink"

Grow rotate

"hover:grow-rotate"

Bounce in

"hover:bounce-in"

Shadow

"hover:shadow"

View all

On-hover animations

On-hover animations can be applied to any element by adding the hover:{animation} class to an element.

<div class="hover:bob">
  This element will use the Bob transition on hover.
</div>

Entrance animations

Entrance animations can be applied to any element by adding the data-animation attribute to an element.

<div data-animation="show">
  This element will use the Show animation when it scrolls into view
</div>

On-hover transitions

On-hover transitions can be applied to any element by adding the hover:{transition} class to an element.

<div class="hover:forward">
  This element will use the Forward transition on hover.
</div>

If you’d like to remove the styles associated with these animations and transitions you can do so by removing the following lines from the document_head.hbs template:

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

The JavaScript required for entrance animations 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";

Related extensions

Carousels Free

Carousels

Present content in well-defined and easy to follow steps.

Content blocks and icons Free

Content blocks and icons

Display icons against categories, sections and articles.

Featured articles Free

Featured articles

Display a list of articles with one or more labels.