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.