simple-scroll-animate v0.4.0
Simple Scroll Animate
A lightweight library that allows you to add animation classes to elements as they appear in the viewport. Make a fancy animation play as you scroll to it.
Under the hood, it simply utilises the Intersection Observer API and applies your CSS classes as you scroll into view.
🚀 Getting started
Install with npm or yarn
npm install simple-scroll-animate --save
Supply the list of HTML elements you are wanting to track in the viewport and animate.
const scrollAnimator = new ScrollAnimator();
scrollAnimator.create(document.querySelectorAll(".animate"));
Add data-animate-class='your-css-class-name'
to your html element. Pass in the CSS class to be applied when the element comes into view.
See the full list of options here.
<div class="animate" data-animate-class="animate-fade-in">
Fancy fade in animation!
</div>
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-fade-in
{
animation: fadeIn .5s linear both;
}
Examples & Demo
For a full list of examples, view an example. To view a demo, click here
Configuration
There are a few options you can apply to your elements.
Config | Description | Default | Required |
---|---|---|---|
data-animate-class="your-css-classname" | The CSS classname you want applied to your element when it comes into view | animate-in | optional |
data-animate-once="true" | Play the animation once, emit to always re-play the animation when in view | false | optional |
data-animate-threshold="0.5" | A value of 1.0 means that the your CSS animation will not play until every pixel of the element is visible in the viewport. The default, 0.5, will play your animation if the visibility passes 50%. | 0.5 | optional |
data-animate-root-margin="50px" | Margin around the element before triggering animation. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" | no-animation | No |
data-animate-delay-seconds="0.1" | The delay in seconds before playing an animation | 0 | No |
📝License
This project is licensed under the MIT License - see the LICENSE.md file for details