17+ Scroll Animations For Single Page App - jQuery Skroll

17+ Scroll Animations For Single Page App - jQuery Skroll

The jQuery Skroll plugin 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.

1. Load the latest version of jQuery JavaScript library and the jQuery Skroll plugin at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="skroll.min.js" type="text/javascript"></script>

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

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

3. Customize the scroll animation. 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",{
    // delay
    delay: 0,
    // duration
    duration: 500,
    // animation type
    animation: "zoomIn",
    // easing effect
    easing: "ease",
    // time to wait
    wait: 0,
    // whether to run only once
    repeat: false

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

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

5. Event handlers.

new Skroll().add(".element",{
     onEnter: function(index,e) {},
     onLeave: function(index,e) {},

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

new Skroll({
    mobile: true

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

  • Publication date: 11.11.2018
  • Source