Josh.js

A JavaScript library to animate content on page scroll

• No jQuery Dependency
• Written on ES6(Compiled ES5 version available)
• Very much lightweight, Only 2KB 😘
• Animate using Animate.css library
• You can use your own CSS animation library
• Work on newly created DOM

See it in action!

💝 Loved it, Press the Star Button 💝

Installation

Using NPM

npm install joshjs

If you are facing issue using as node module then please check the "asModule" branch. I have added example code for that.

Using HTML 〈script〉 tag

<script src="js/josh.min.js">

// Or use ES5
<script src="js/josh.es5.min.js">

CDN

jsDelivr

//ES6
https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js

//ES5
https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.es5.min.js

UNPKG

//ES6
https://unpkg.com/joshjs@1.0.0/dist/josh.min.js

//ES5
https://unpkg.com/joshjs@1.0.0/dist/josh.es5.min.js

Usage

HTML

<div class="josh-js" data-josh-anim-name="fadeInUp">A JavaScript library to animate content on page scroll.</div>

// You have to provide below data attribute with animation name from Animate.css library or your own library

data-josh-anim-name="fadeInUp"

How to get animation name

Go to Animate.css website. Copy the animation class name from right panel, you will get class name like "animatebackInDown" remove "animate" you get animation name like "backInDown" add this to above data attribute.

CSS

Add this css file to your HTML file.

<link rel="stylesheet" href="css/animate.css" />

JavaScript

const josh = new Josh();

If you write HTML, added CSS file and called JavaScript like above so that you are good to go!

Advanced usage

HTML

<div
    class="element josh-js"
    data-josh-anim-name="lightSpeedInRight"
    data-josh-duration="1500ms"
    data-josh-anim-delay="3.5s"
    data-josh-iteration="infinite"
>
    Written on ES6
</div>

JavaScript

const josh = new Josh({
    // DOM CSS class to Animate, default is "josh-js"
    initClass: "josh-js",

    // Animation CSS class from Animate.css library
    animClass: "animate__animated",

    // Element distance of viewport to triggering the animation. default is 0.2 means 20% of element view animation will trigger
    offset: 0.2,

    // Animation will trigger on Mobile or not. Default is true
    animateInMobile: true,

    // Animation will trigger on newly added element or not. Default is false
    onDOMChange: false,
  });

Dependencies

• animate.css

Browser Support

All modern browsers are supported. Because of written in ES6 and modern web API Internet Explorer will not support. Here you can check supported browser:

IntersectionObserver Not supported by IE.

MutationObserver Supported by IE 11.

If you want to support Internet Explore so that you can use Polifill for IntersectionObserver.

IntersectionObserver Polifill 1

IntersectionObserver Polifill 2

Developer

Developed by Al Mamun

• Github Profile
• LinkedIn
• Facebook Profile

Want to contribute? Great!

Fork it, clone it to your PC, fix the issue, push to your repository, Make a pull request to this repository. You are done!

License

MIT

Free Software, Hell Yeah!