On-hover animations
On-hover animations play when a visitor hovers over a given element.
Bob
Buzz
Hang
Pop
Pulse grow
Push
Wobble vertical
Wobble to top right
Entrance animations
Entrance animations play when a given element scrolls into view.
Show
Bounce
Flash
Pulse
Fade in up
Flip in X
Rotate in up right
Zoom in
On-hover transitions
On hover-transitions take effect when a visitor hovers over a given element.
Forward
Float
Sink
Grow
Shrink
Grow rotate
Bounce in
Shadow
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 'style-hover-animations.min.css'}}">
<link rel="stylesheet" href="{{asset 'style-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 'script-animations.min.js'}}" defer></script>
