Minimal animate on scroll library.
Install the package:
# yarn
yarn add -D @eb3n/anime
# npm
npm i -D @eb3n/anime
Import 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:
duration
anddelay
are limited to increments of250
between0 - 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>
fade
fade-up
fade-right
fade-down
fade-left
zoom-in
zoom-in-up
zoom-in-right
zoom-in-down
zoom-in-left
zoom-out
zoom-out-up
zoom-out-right
zoom-out-down
zoom-out-left
flip-up
flip-right
flip-down
flip-left