Minimal animate on scroll library.
Install the package:
# yarn
yarn add -D @eb3n/anime
# npm
npm i -D @eb3n/animeImport the script and styles, and initialise:
import anime from '@eb3n/anime'
import '@eb3n/anime/dist/anime.min.css'
anime()Simply set the anime attribute on any elements you wish to animate (valid animation names):
<body>
<p anime="fade">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</body>NOTE:
durationanddelayare limited to increments of250between0 - 3000.
You can pass options to anime when you initialise it:
anime({
duration: 1000, // the length of the animation (in ms)
delay: 0, // the delay before the animation plays (in ms)
offset: 0 // the offset from the original trigger point (in px)
})You can also configure anime per element:
<body>
<p anime="fade" anime-duration="500" anime-delay="250" anime-offset="100">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</body>Elements also have access to anime-trigger, which requires a CSS selector. This lets you begin an element's animation when another (usually parent) element is scrolled into view.
<body>
<ul id="list">
<li anime="fade-up" anime-delay="250" anime-trigger="#list">Lorem</li>
<li anime="fade-up" anime-delay="500" anime-trigger="#list">ipsum</li>
<li anime="fade-up" anime-delay="750" anime-trigger="#list">dolor</li>
<li anime="fade-up" anime-delay="1000" anime-trigger="#list">Lorem</li>
<li anime="fade-up" anime-delay="1250" anime-trigger="#list">Lorem</li>
</ul>
</body>fadefade-upfade-rightfade-downfade-left
zoom-inzoom-in-upzoom-in-rightzoom-in-downzoom-in-left
zoom-outzoom-out-upzoom-out-rightzoom-out-downzoom-out-left
flip-upflip-rightflip-downflip-left