Animations
How To Use
Additional classes that can be used to create your desired animation.
Examples
animate
Required on all animated elements
Animation plays for 1 second
animateInfinite
Animation will replay forever
animateRepeat1
Animation repeats once
animateRepeat2
Animation repeats twice
animateRepeat3
Animation repeats three times
animateDelay1s
Animation is delayed 1 second
animateDelay2s
Animation is delayed 2 seconds
animateDelay3s
Animation is delayed 3 seconds
animateDelay4s
Animation is delayed 4 seconds
animateDelay5s
Animations is delayed 5 seconds
animateFast
Animation plays for 0.8 seconds
animateFaster
Animation plays for 0.5 seconds
animateFastest
Animation plays for 0.3 seconds
animateSlow
Animation plays for 2 seconds
animateSlower
Animation plays for 3 seconds
Code
<div class="animate animateFadeIn animateFaster">Your Element</div>
Notes
Must use animate class on every animated element.
The animate class already has a set duration of 1 second. Only use additional classes if you would like to change this.
This has been adapted from Animate.css.
Resources
| Sass File(s) | /sass/animations/new/_core.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Already set up so user can turn off animations if preferred.
Fade In, Zoom In
Animations that come into the page in their static position.
Examples
animateFadeIn
Hello!
animateZoomIn
Hello!
Code
<div class="animate animateFadeIn">Your Element</div>
<div class="animate animateZoomIn">Your Element</div>
/* optional */
const fadeIn = element => {
element.classList.remove("animateFadeOut");
element.classList.add("animateFadeIn");
element.classList.remove("hide");
};
Notes
If wanting to use a fadeIn function in your Javascript, see code example.
Resources
| Sass File(s) | /sass/animations/new/_core.scss /sass/animations/new/_fadein.scss or /sass/animations/new/_zoomin.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Already set up so user can turn off animations if preferred.
Fade In Down, Slide In Down, Bounce In Down
Animations that begin near the top and come down to appear.
Examples
animateFadeInDown
Hello!
animateSlideInDown
Hello!
animateBounceInDown
Hello!
Code
<div class="animate animateFadeInDown">Your Element</div>
<div class="animate animateSlideInDown">Your Element</div>
Notes
None at this time.
Resources
| Sass File(s) | /sass/animations/new/_core.scss /sass/animations/new/_fadeindown.scss or /sass/animations/new/_slideindown.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Already set up so user can turn off animations if preferred.
Fade In Left, Fade In Right, Fade In Up
Animations that fade onto the page from left, right or bottom.
Examples
animateFadeInLeft
Hello!
animateFadeInRight
Hello!
animateSlideInUp
Hello!
Code
<div class="animate animateFadeInLeft">Your Element</div>
<div class="animate animateFadeInRight">Your Element</div>
<div class="animate animateSlideInUp">Your Element</div>
Notes
None at this time.
Resources
| Sass File(s) | /sass/animations/new/_core.scss /sass/animations/new/_fadeinleft.scss or /sass/animations/new/_fadeinright.scss or /sass/animations/new/_slideinup.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Already set up so user can turn off animations if preferred.
Fade Out, Zoom Out
Animations that exit the page in their static position.
Examples
animateFadeOut
Hello!
animateZoomOut
Hello!
Code
<div class="animate animateFadeOut">Your Element</div>
<div class="animate animateZoomOut">Your Element</div>
/* optional */
const fadeOut = element => {
element.classList.remove("animateFadeIn");
element.classList.add("animateFadeOut");
setTimeout(() => {
element.classList.add("hide");
}, 400);
};
Notes
If wanting to use a fadeOut function in your Javascript, see code example and update the timeout duration to match animation length.
Resources
| Sass File(s) | /sass/animations/new/_core.scss /sass/animations/new/_fadeout.scss or /sass/animations/new/_zoomout.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Already set up so user can turn off animations if preferred.
Fade In Left, Fade In Right, Fade In Up
Animations that fade off the page to the left, right or bottom.
Examples
animateFadeOutDown
Hello!
animateSlideOutLeft
Hello!
animateFadeOutLeftBig
Hello!
animateSlideOutRight
Hello!
animateSlideOutUp
Hello!
Code
<div class="animate animateFadeOutDown">Your Element</div>
<div class="animate animateSlideOutLeft">Your Element</div>
<div class="animate animateFadeOutLeftBig">Your Element</div>
<div class="animate animateSlideOutRight">Your Element</div>
Notes
None at this time.
Resources
| Sass File(s) | /sass/animations/new/_core.scss /sass/animations/new/_fadeoutdown.scss or /sass/animations/new/_slideoutleft.scss or /sass/animations/new/_fadeoutleftbig.scss or /sass/animations/new/_slideoutright.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Already set up so user can turn off animations if preferred.
Shake Horizontal, Shake Vertical
Animations that move the element left and right or up and down.
Examples
animateShakeHorizontal
Hello!
animateShakeVertical
Hello!
Code
<div class="animate animateShakeHorizontal">Your Element</div>
<div class="animate animateShakeVertical">Your Element</div>
Notes
None at this time.
Resources
| Sass File(s) | /sass/animations/new/_core.scss /sass/animations/new/_shakevertical.scss or /sass/animations/new/_shakehorizontal.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Already set up so user can turn off animations if preferred.