enami v0.8.2
This library uses IntersectionObserver API, to check the visibility of the element, allowing to trigger css animations on horizontal scrolls, when using a smooth-scroll library or inside a slider/carousel.
Features
Parent triggering: You can specify a parent element, so you can trigger all the animated elements inside it.
Staggering: Adds a delay between all the children animations to make a domino effect.
Basic usage
- Include script and css
<script src="https://unpkg.com/enami@0.8.0/dist/enami.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/enami@0.8.0/dist/enami.min.css">
- Add your animation attribute data-enami="fade-up" on the HTML element you want to animate
<h1 data-enami="fade-up">Hello world!</h1>
- Init the script
var myEnami = new enami();
Notes
- Data attributes override options
- All parameters are optional
Methods
Events
Usage
myEnami = document.getElementById('myElement')
myEnami.addEventListener('enami:animate-out', function (e) {
alert('Hello World')
});
List
Custom animation CSS
[data-enami="my-animation"][data-enami-in] {
animation: 2s fadeUp forwards cubic-bezier(0.19, 1, 0.22, 1);
@keyframes myAnimation {
from {
transform: translate3d(0, 40px, 0) rotate(0.02deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0) rotate(0deg);
opacity: 1;
}
}
}
Note:
This library is meant to work as a simple way to animate elements on your site, if you intend to do some heavy animations you are probably looking for libraries like anime.js or gsap
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago