CSS and JavaScript Animations on the web

The Guide to Scrolling Animation Libraries

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

CSS3 Animations Skills Requirements

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

CSS3 Animations Library Skills Requirement

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

Merry Christmallax

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

Join me in the Parallax Scrolling Master Class.

Parallax Scrolling Master Class

3. For advanced developers

Javascript Animations Advanced Skills Requirements

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

Happy Birthday Game Boy

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.

14 thoughts on “The Guide to Scrolling Animation Libraries

    1. Petr Tichy Post author

      Thanks Mike, glad you like the syntaxes, that was kind of what I wanted to show. Some people will freak out when they see Greensock code and will stick to one line of data attributes.

      Which one do you prefer?

      Reply
  1. Cristian

    Great job!
    i tried to use thiese libraries for one project but i see that there is a conflict between them!?Is it possible!?!?
    Thanks for the answer and sorry for my english!!

    Reply
  2. Zach

    Is it possible to use animate.css with ScrollMagic? Rather than code my own css for transition/animations, I’d like to simply use animate.css.

    If that is possible, does it make sense to do that, or at that point should I just be using WOW?

    Thanks for this guide btw – it definitely made my options more clear to me.

    Reply
    1. Petr Tichy Post author

      Hi Zach, it is possible to trigger animate.css animations using ScrollMagic.

      Follow this ScrollMagic tutorial (step #7) to learn how to change a CSS class.

      However if all you need is to move one element when it comes to a view, then wow.js is an easier option.

      What kind of effect are you trying to create?

      Reply
  3. Steve Gebhard

    I use a drag and drop software and have no coding experience. Do I need some beginner classes before I take your class.

    Thanks
    Steve

    Reply
    1. Petr Tichy Post author

      Hi Steve, if you are completely new to coding, I would suggest you take some beginner courses on Treehouse or Codeschool first, but you can sign up to my courses anytime and take the advantage of my money back guarantee if you find it too advanced.

      Let me know if you have any other questions. Thanks Steve

      Reply
  4. Nathan

    I like your choices, it runs the full range from dumb easy to not easy. Its great to find a list of favorites. There’s so many libs out there its hard to decide. I know Scroll Magic talks to Velocity as well as Greensock/Tween Max, but do any of the others?

    Reply
    1. Petr Tichy Post author

      Hi Nathan, ScrollMagic is the only plugins that talks to both Velocity and GreenSock. it’s the most flexible and powerful option currently available. Hope that helps.

      Reply
  5. Chris F Carroll

    As an allowable exception to the “put the Sans into Comic Sans” rule, the wow.js homepage follows the doge-meme standard.
    PS thx for the reviews.
    Chris
    x

    Reply

Leave a Reply to Steve Gebhard Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>