Do you wanted to finally dive into scrolling animations and share your story or product in a more interactive and engaging way?

Are you confused which parallax scrolling library is the right for you and your project?

Are you drowning in the sea of all the options available?

Luckily, you’ve come to the right place.

Who is this guide for?

This guide is aimed at a front-end web developers looking for a direction when it comes to animations triggered on page scroll.

It will save you a time haunting around the web, instead you can start having fun with scrolling animations.

Similar to my CSS Animation and JavaScript animation guides I will try to offer a solution based on your skill set and the stage of your career.

View Demo →

Related Video

1. For beginners

WOW.js

I was quite hesitant to include WOW.js in this guide, purely because of the use of Comic Sans on their demo page, but this guide is about scrolling animations isn’t it?

Wow.js by Matthieu Aussaguel lets you to add any Animate.css (or another css animation library) effects and apply it to your HTML elements.

It will keep this element invisible until the user scrolls to reveal it.

The setup is very easy and doesn’t require any JavaScript knowledge, you’ll be fine with just copy and paste.

Code example

<div class="wow bounceInUp">Content to Reveal Here</div>

This will reveal your div with the bounceInUp animation when the user scrolls to it.

You can also set a few advanced parameters such as duration, delay, offset and iteration.

scrollReveal.js

scrollReveal.js by @JulianLloyd offers you a little bit more control.

Not only you can choose the direction from which the element will appear, but you can also use conjoining filter words such as from, and, then, with.

wait or after defines the delay of your animations.

Code example

<!-- Reveal using defaults. -->
<div data-scroll-reveal> Hello world! </div>

<!-- Reveal using custom parameters. -->
<div data-scroll-reveal="enter left and move 50px over 1.33s"> Foo </div>

The first element would be revealed using the default values as soon as the element is within the viewport.

The second example shows you more parameters that you can use to create your desired effect.

2. For intermediate developers

Skrollr.js

Skrollr by Alexander Prinzhorn has been around for a while and is one of my favorites.

I have created a couple of tutorials which can see here or here.

Skrollr doesn’t only trigger animation when the element comes to the view, it can also trigger another animation on the same element before it leaves the viewport for example.

You can also control the length on you animations.

In other words you can define how many pixels does the user need to scroll down before the animation goes from one keyframe to another.

See Skrollr in action

Do you want to learn more about Skrollr and how it works?

Join me in the Parallax Scrolling Master Class.

3. For advanced developers

SuperScrollorama

SuperScrollorama by John Polacek is one of the more advanced libraries and requires some JavaScript knowledge.

If you are comfortable working with JavaScript, this library is the right one for you.

SuperScrollorama is powered by Greensock, currently the best JavaScript animation library available for animations on the web.

You can take advantage of a more complex animations such as:

• nested timelines
• rewind, fast forward, repeat timeline
• rich callback system
• and more.

See SuperScrollorama in action

ScrollMagic

ScrollMagic by Jan Paepke is the latest addition to the scrolling libraries family and is a complete rewrite of its predecessor SuperScrollorama.

It is also powered by Greensock and therefore lets you create a very complex nested animation timelines.

ScrollMagic’s biggest advantages are:

• optimized performance
• flexibility
• more compatibility
• ready for responsive web design
• and more.

Once you get familiar with the Greensock syntax, you will realize the power of these two libraries.

Only your imagination will be the limit.

View Demo →

Conclusion

There you have it, a list of my 5 favorite scrolling libraries currently available to front-end developers.

Have you worked on a project using any of these or are you doing a research for your first scrolling animation project?

What are your biggest struggles when it comes to creating parallax scrolling websites?

Let me know in the comments below.