-
Install package as dependency
yarn add lazyanimate # or npm install lazyanimate
-
Import functions in your script and create an instance
import LazyAnimate from 'lazyanimate' const lazyAnimate = new LazyAnimate()
Lazy animate an element by adding a class of lazyanimate
and a data-animate
attribute with the CSS keyframes animation name:
<!-- HTML -->
<div class="my-div lazyanimate" data-animate="slide-in"></div>
Add CSS animation keyframes and apply duration and timing function:
Note that you should not apply the animation name to your elements as lazyanimate will do this for you via the data-animate attribute.
/* CSS */
.my-div {
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
@keyframes slide-in {
from {
transform: translateX(-60px);
}
}
Initialize lazyanimate in your JavaScript:
import LazyAnimate from 'lazyanimate'
const lazyAnimate = new LazyAnimate()
lazyAnimate.lazyAnimateAllOnLoad()
The data-animate
attribute accepts either a string or a JavaScript object.
If a string is passed in, the element will have the CSS property animation-name
applied to it when your lazyAnimate JS triggers it.
Eg: data-animate="slide-in"
If a JS object is passed in, you can apply any css property prefixed with animation-
.
data-animate="{ name: '', delay: 0, direction: '', duration: 0, fillMode: '',
iterationCount: 1, playState: '', timingFunction: '' }"
You can also change the animation name using a media query string.
You should have one key with a value of true
which will be the fallback animation.
data-animate="{ name: { 'slide-in': true, 'slide-in-tablet': '(min-width:
768px)' } }"
Loads all lazyanimate animations on load or instantly if already loaded.
import LazyAnimate from 'lazyanimate'
const lazyAnimate = new LazyAnimate()
lazyAnimate.lazyAnimateAllOnLoad()
Applies a CSS animation to an element based on it's data-animate.
import LazyAnimate from 'lazyanimate'
const el = document.getElementById('...')
const lazyAnimate = new LazyAnimate()
lazyAnimate.lazyAnimateElement(el)
Applies lazy animate to all elements when intersection observer fires.
import LazyAnimate from 'lazyanimate'
const scrollContainer = document.getElementById('...')
const thresholdPercent = 0.8
const lazyAnimate = new LazyAnimate()
lazyAnimate.lazyAnimateOnScroll(scrollContainer, thresholdPercent)