Animate on Scroll

Small library to Animate elements as the user scrolls down and the section is visible. Lightweight and easy to apply.

Library is Free and Open Source.

LIVE DEMO ALL ANIMATION DEMO HOW TO USE
How to Use

  1. Add animate.css CDN to your application.

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

    Or alternatively you can download the library and link on your project
    https://daneden.github.io/animate.css/

  2. Add OyeThemes Animate on Scroll JS & CSS CDN

    Download Library to your JS Folder.

    <script src="https://cdn.jsdelivr.net/gh/shishirraven/animate-on-scroll@v1.0/oyethemes_onscroll_animation.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/shishirraven/animate-on-scroll@v1.2/animation_utility.css">

    Or alternatively you can download the library and link on your project.
    https://github.com/shishirraven/animate-on-scroll/blob/master/oyethemes_onscroll_animation.js

  3. Choose Animation, Speed, Delay and apply classes to the element

Preview Animation
S

Apply these classes to the element to which you want to add animation

scrollanimation animated {{animationClass}} {{animationDuration}} {{animationDelay}}


Your element should look like
<div class="scrollanimation animated {{animationClass}} {{animationDuration}} {{animationDelay}} "> ... </div>

Repeat this step for different elements on the page.

That's it! You've got a CSS animated element on Scroll. Super!

To show your support and love share us on facebook.