Sections

Hover animations

Hover animations allow you to create engaging interactions on your page.

Usage

After following the installation steps below, hover animations can be applied to any element by adding hover:{animation} class to an element

Examples

Bob

"hover:bob"

Buzz

"hover:buzz"

Buzz out

"hover:buzz-out"

Hang

"hover:hang"

Pop

"hover:pop"

Pulse

"hover:pulse"

Pulse grow

"hover:pulse-grow"

Pulse shrink

"hover:pulse-shrink"

Push

"hover:push"

Wobble top

"hover:wobble-top"

Wobble bottom

"hover:wobble-bottom"

Wobble to bottom right

"hover:wobble-to-bottom-right"

Wobble to top right

"hover:wobble-to-top-right"

Wobble horizontal

"hover:wobble-horizontal"

Wobble vertical

"hover:wobble-vertical"

Wobble skew

"hover:wobble-skew"

Installation

Because not every theme will make use of hover 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 hover-animations.css stylesheet in your document_head.hbs template:

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