JavaScript Library For Fade/Slide Animations On Scroll – fs-scrollanimate

Preview:

Description:

fs-scrollanimate is a tiny JavaScript library for scroll animations that apply fade and slide animations to desired elements when scrolled into view.

How to use it:

To get started, insert the stylesheet fs-scrollanimate.css and JavaScript fs-scrollanimate.js into the html file.

<link href="src/css/fs-scrollanimate.css" rel="stylesheet">
<script src="src/js/fs-scrollanimate.js"></script>

Add the CSS class to the element you want to animate on scroll.

<div class="box fs-scroll">Element To Animate On Scroll</div>

Apply a scroll animation to the element using the following classes:

<div class="box fs-scroll fs-fadein">Fade In</div>
<div class="box fs-scroll fs-slideup">Slide Up</div>
<div class="box fs-scroll fs-slideright">Slide Right</div>
<div class="box fs-scroll fs-slideleft">Slide Left</div>

Sometimes you might need to slow down the animation.

<div class="box fs-scroll fs-slideup fs-slow">Slide Up</div>