A simple JavaScript library to animate your HTML elements when they are scrolled into view. This library doesn't have any dependencies and can be used with any webpage.
You can view a demo here
https://cdn.jsdelivr.net/gh/FaisalST32/fs-scrollanimate@latest/src/js/fs-scrollanimate.min.js
https://cdn.jsdelivr.net/gh/FaisalST32/fs-scrollanimate@latest/src/css/fs-scrollanimate.min.css
npm i fs-scrollanimate
https://www.npmjs.com/package/fs-scrollanimate
-
To use this library, you can simply add a reference to the .js file at the end of the body of your html and the .css file in the head of your html page.
-
To animate an element when it's scrolled into view, you need to add the 'fs-scroll' class to that element.
-
Next you need to add the animation class to the same element. At the moment, following classes are supported:
-
fs-fadein: Gives the element a fade effect when it's scrolled into view.
-
fs-slideup: The element will slide up with a fade-in effect when scrolled into view.
-
fs-slideright: The element will slide right with a fade-in effect when scrolled into view.
-
fs-slideleft: The element will slide left with a fade-in effect when scrolled into view.
-
-
Additionally you can add a timing class to the animation. At the moment, following class is supported:
- fs-slow: Slows down the animation.
-
As an example, if you want to add slide-up animation to an element with a slowed down effect, you will do the following:
<p class="fs-scroll fs-slideup fs-slow"> This is a paragraph</p>
-
That's it. Your elements will be animated when they are scrolled into view.