17+ Scroll Animations For Single Page App - jQuery Skroll

A jQuery vanilla JavaScript scroll animation plugin which provides 17+ CSS3 powered scroll-triggered animations for page elements when they're scrolled into view.

Highly customizable and you can enable/disable the scroll animations on mobile devices.

How to use it:

1. Load the latest version of the Skroll plugin at the end of the document.

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

2. Initialize the Skroll plugin on specific element(s) within the document.

new Skroll()
  .add(".element",{
    // options here
  })
.init();

3. Set the scroll animation you prefer. All possible animation types:

1. zoomIn (Default)
2. fadeInLeft
3. fadeInRight
4. fadeInLeftBig
5. fadeInRightBig
6. fadeInUp
7. fadeInDown
8. slideInLeft
9. slideInLeftBig
10. slideInRight
11. slideInRightBig
12. flipInX
13. flipInY
14. rotateRightIn
15. rotateLeftIn
16. growInLeft
17. growInRight

new Skroll().add(".element",{

    animation: "zoomIn"

}).init();

4. Additional options to customize the animation.

new Skroll()
  .add(".element",{
    
    // delay in ms
    delay: 0,

    // duration of animation
    duration: 500,

    // easing function
    easing: "ease",

    // time to wait
    wait:0,

    // is repeatable?
    repeat:false
    
  })
.init();

5. Customize the top/bottom offsets to trigger the scroll animation.

new Skroll().add(".element",{

    triggerTop:.2,
    triggerBottom:.8

}).init();

6. Event handlers.

new Skroll().add(".element",{

     onEnter: function(index,e) {},
     onLeave: function(index,e) {},

}).init();

7. To enable the scroll animation on mobile devices, change the mobile:false to true in the JS.

new Skroll({
    mobile: true
})

8. Add your own animations:

new Skroll()
  .addAnimation("yourAnimation",{
    start:function(el){
      /*
      JQuery can also be used
      */
      el.style["transform"] = "scale(.1,.1)";
      el.style["opacity"] = 0;
     },
     end:function(el){
      el.style["transform"] = "scale(1,1)";
      el.style["opacity"] = 1;
     }
})

9. Recalculate the position of elements.

new Skroll().recalcPosition();

Changelog:

v2.0.0 (2019-03-10)

• dropped jQuery dependency
• bugs fixed

---

This awesome jQuery plugin is developed by akzhy. For more Advanced Usages, please check the demo page or visit the official website.