npm install joshjs

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

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

//ES6
https://cdn.jsdelivr.net/npm/[email protected]/dist/josh.min.js

//ES5
https://cdn.jsdelivr.net/npm/[email protected]/dist/josh.es5.min.js

//ES6
https://unpkg.com/[email protected]/dist/josh.min.js

//ES5
https://unpkg.com/[email protected]/dist/josh.es5.min.js

<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"

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

const josh = new Josh();

<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>

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,
  });