2kb Scroll-triggered Animation Library – josh.js

Preview:

Description:

A lightweight (2kb minified) ES5/ES6 JavaScript library to animate content on scroll using CSS3 animations and intersection observer API.

By default, the library uses the latest Animate.css library to provide scroll-triggered animations.  Works with modern web applications with infinite scroll.

How to use it:

1. Install & Download.

# NPM
$ npm install joshjs --save

2. Load the josh.js library in the HTML document.

// ES 6
<script src="./dist/josh.min.js">
// Or ES5
<script src="./dist/josh.es5.min.js">

3. Load a CSS animation library of your choice in the document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />

4. Add the ‘josh-js’ CSS class to the target element.

<div class="josh-js">
  Element To Animate On Scroll
</div>

5. Determine the CSS3 animation you want to use. Refer to https://animate.style/ for more animation names.

<div class="josh-js" 
     data-josh-anim-name="fadeInLeft">
     Element To Animate On Scroll
</div>

6. Initialize the josh.js library and done.

const josh = new Josh();

7. Customize the duration & delay of the animation.

<div class="josh-js" 
     data-josh-anim-name="fadeInLeft"
     data-josh-duration="3000ms"
     data-josh-anim-delay="1.5s">
     Element To Animate On Scroll
</div>

8. Determine the iteration count of the animation.

<div class="josh-js" 
     data-josh-anim-name="fadeInLeft"
     data-josh-iteration="infinite">
     Element To Animate On Scroll
</div>

9. Use your own CSS animation library instead of Animate.css.

const josh = new Josh({
      animClass: "custom_"
});

10. Determine the distance from the top to trigger the animation. Default: ‘0.2’ (20%).

const josh = new Josh({
      offset: 0.1
});

11. Determine whether to enable the library on mobile devices. Default: true.

const josh = new Josh({
      animateInMobile: false
});

12. Determine whether to enable the library on web application with infinite scroll. Default: false.

const josh = new Josh({
      onDOMChange: true
});