Parallax Scrolling Master Class by Petr Tichy

A Guide to JavaScript Scrolling Animations Libraries

Scroll down to see a few examples of scrolling animations in action.

WOW ME

The above element is animated using WOW.js.

<h2 class="wow bounceInUp" data-wow-offset="200">WOW ME</h2>

SCROLLREVEAL ME

The above element is animated using scrollReveal.js.

<h2 data-scroll-reveal="enter left move 150px, after 0.9s">SCROLLREVEAL ME</h2>

SKROLLR ME

The above element is animated using Skrollr.js.

<h2
    data-bottom-top="opacity: 0; transform: translateX(200px);"
    data-center-bottom="opacity: 1; transform: translateX(0px);"
>SKROLLR ME</h2>

SUPERSCROLLORAMA ME

The above element is animated using SuperScrollorama.js.

controller.addTween(
    4500,
    (new TimelineMax())
        .from($ssTitle, 0.01, {css:{opacity:0}})
        .from($ssTitleSpan, 0.01, {css:{opacity: 0, rotation: '-90', scale: 0.5 }}, 0)
    ,300
);

SCROLLMAGIC ME

The above element is animated using ScrollMagic.js.

var tween = TweenMax.from($smTitle, 2, {opacity: 0, scale: 2});