Fade/Slide In Elements On Scroll – JS Scroll Animations

Preview:

Description:

A lightweight JavaScript scroll animation library that adds high-performance, CSS3-powered fade/slide animations to elements as they scroll into view.

It offers a range of options to activate, delay, and adjust animations to your liking, transforming static elements into an engaging, interactive experience.

How to use it:

1. Install & download.

# Yarn
$ yarn add js-scroll-animations
# NPM
$ npm i js-scroll-animations

2. Import the JS Scroll Animations.

// As ES Module
import jsScroll from "js-scroll-animations";
import "js-scroll-animations/styles.css";

<!-- Browser -->
<link rel="stylesheet" href="dist/styles.css" />
<script src="dist/index.js"></script>

3. Add the data-jsscroll attribute to the element to be animated on scroll and choose an animation type of your choice as displayed below:

<div
  data-jsscroll
  data-jsscroll-fade-in
>
  Fade In
</div>
<div
  data-jsscroll
  data-jsscroll-slide-top
>
  Slide Top
</div>
<div
  data-jsscroll
  data-jsscroll-slide-bottom
>
  Slide Bottom
</div>
<div
  data-jsscroll
  data-jsscroll-slide-left
>
  Slide Left
</div>
<div
  data-jsscroll
  data-jsscroll-slide-right
>
  Slide Right
</div>

4. Config the scroll animation using the following data attributes:

<div
  data-jsscroll
  data-jsscroll-fade-in
  data-jsscroll-delay="0"
  data-jsscroll-threshold="1.25"
>

5. API methods.

// initialize
const jsScroll = jsScrollAnimations();
jsScroll.init();
// disable
jsScroll.disable();
// reset
jsScroll.reset();
// pause
jsScroll.pause();