Skrollr vs ScrollMagic

Skrollr vs ScrollMagic

Skrollr or ScrollMagic? Which one should you choose and why? This might be the question you ask yourself when you start a scrolling animation project.

Here is my opinion on when you should use it and when you should stay away from it.

Keep scrolling…

Quick Overview

If you are in a hurry, you can be rest assured that both of these plugins will give you the power to create amazing scrolling animations.

It’s not about the tool, it’s about what you will do with it.

So…

If you are a designer without any JavaScript knowledge use Skrollr.

If you are a front end developer with at least a basic knowledge of jQuery use ScrollMagic.

1. Learning Curve

Skrollr vs ScrollMagic

How quickly can you get something up and scrolling?

Now this really depends on how good you are at learning new things.

Here’s my view.

Skrollr

Skrollr doesn’t require much more than including the library and adding your first data attribute.

In other words you can get things moving pretty quickly. There is also a nice collection of tutorials and demos out there which should help you to get started with Skrollr.

To speed up the learning curve with Skrollr you can also sign up for my Parallax Scrolling Master Class or watch a number of tutorials on YouTube.

Parallax Scrolling Master Class

ScrollMagic

ScrollMagic is quite new on the scene and the number of resources is therefore limited to the ScrollMagic demos.

There is a growing number of examples which should give you a good overview of how to use it.

I am sure over time ScrollMagic will catchup, but at the moment Skrollr is the winner.

Stay tuned for more ScrollMagic demos and tutorials on this blog.

Winner: Skrollr

Skrollr vs ScrollMagic

Skrollr is the winner when it comes to the number of resources out there.

2. Documentation

Skrollr vs ScrollMagic

Having good documentation is the key for a quick start with any new library or plugin.

Luckily both Skrollr and ScrollMagic have quite extensive documentation.

Skrollr

Skrollr git hub page includes everything you need to know to get started.

The visual Skrollr data attribute info graphic helps you to understand which settings to use for your animations, but can get quite confusing at the start.

Don’t worry, you are not alone.

Keep calm, set up a simple demo like this one and start playing with the data attributes.

You can also download my illustrated cheatheet.

ScrollMagic

ScrollMagic is powered by GreenSock, which means that you need to understand at least 2 syntaxes before you can start animating.

Given that this battle is just between Skrollr and ScrollMagic, let’s forget about GreenSock for a moment.

The official ScrollMagic documentation is very extensive and describes every single feature and option.

I feel it is more organised and the search function is also a bonus point.

On the other hand the extensive documentation might be overwhelming to some newbies.

Winner: ScrollMagic

Skrollr vs ScrollMagic

ScrollMagic is my winner when it comes to the structure of the documentation.

3. Syntax Complexity

Skrollr vs ScrollMagic

Both scrolling libraries require that you learn a new syntax and both have their pros and cons.

Skrollr

Data attributes is the key to animating with Skrollr.

As I mentioned above, it can be very confusing especially at the start.

data-top-bottom, data-100-top? You might be thinking what?

Relax, once you get it…it’s easy.

Include your data attributes in the html tags and you’ll be animating in no time.

ScrollMagic

GreenSock tweens and timelines together with ScrollMagic scenes giving you a lot of power and control.

But talking purely about the syntax complexity, ScrollMagic requires more code.

What you can you do with two Skrollr data attributes will require quite a few lines of jQuery code.

Winner: Skrollr

Skrollr vs ScrollMagic

Skrollr syntax is simple once you get your head around the data attributes.

4. Number Of Features

Skrollr vs ScrollMagic

Before we dive into the number of features, let me just say this:

“It’s not about the features, it’s about your idea and your implementation.”

You can create amazing scrolling websites using either of these plugins.

Skrollr

Skrollr let’s you animate any CSS property with a number value.

You can move things up and down, left and right, rotate, scale etc.

In most cases this is all you need.

This is when Skrollr is handy:

  • if all you need is vertical scrolling
  • if you are just starting out with scrolling animations
  • if you don’t have much time to learn complex syntax

But there is one disadvantage in using Skrollr:

Nothing will move if the user stops scrolling.

Do you need to trigger animations at some point or create more complex timelines? Forget about Skrollr.

ScrollMagic

ScrollMagic on the other hand lets you create some more complex animations, thanks to the powerful GreenSock library behind it.

Your imagination is the only limit.

This is when ScrollMagic is handy:

  • if you want to trigger animation once the user scrolls past a certain point
  • if you want horizontal scrolling
  • if you want trigger animations based on completing another animation (callbacks)

Trust me there is no limit on what you can do with ScrollMagic.

If you have a creative idea in mind, ScrollMagic will help you to execute it.

Winner: ScrollMagic

Skrollr vs ScrollMagic

The feature rich GreenSock library gives ScrollMagic a massive advantage when it comes to creating more complex scrolling animations and timelines.

5. Play-Off

Skrollr vs ScrollMagic

2:2 is the score at the moment, extra time will be needed to make a final decision.

The deciding point for ScrollMagic is the recent updates and active development of the plugin in the last few months.

Rumour has it, that ScrollMagic will remove any dependencies like jQuery and GreenSock and you will be able to use any other animation library in the future.

Winner: ScrollMagic

Skrollr vs ScrollMagic

The future looks very bright for ScrollMagic.

The number of features and options make it currently the best scrolling library out there.

Final Verdict

Skrollr vs ScrollMagic

Picking a winner between these two wasn’t an easy task.

At the end of the day it all depends on your project, how quickly you can learn a new syntax and how well you implement your idea.

Credit to both Jan Peapke (ScrollMagic) and Alexander Prinzhorn (Skrollr) for creating these two amazing libraries.

Examples

Here are some examples of sites which use both Skrollr and ScrollMagic to give you a taste of what you can do with them.

Skrollr Examples

Click on the thumbnail to see these creative Skrollr examples.

Merry Christmallax

Skrollr vs ScrollMagic

Squarespace 7

Skrollr vs ScrollMagic

Kia

img_skrollr-vs-scrollmagic-kia

ScrollMagic Examples

Click on the thumbnails to see these creative ScrollMagic examples.

Tink

Skrollr vs ScrollMagic

Bunt Spended

Skrollr vs ScrollMagic

Lempens Design

Skrollr vs ScrollMagic

Conclusion

What’s your take on Skrollr or ScrollMagic? Do you have a preference and why?

Let me know in the comments below.

Happy scrolling!

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

100% Privacy. Guaranteed! Powered by ConvertKit

37 thoughts on “Skrollr vs ScrollMagic

  1. Vitor Jorge

    Hi, Petr! Nice article as always. ScrollMagic seems more interesting to me. Both are great! :)

    (Obs: ScrollMagic link in Quick Overview is redirecting to www.google.com)

    Reply
  2. Mason

    Hey Petr, first off thanks for being such a great asset to the community. Second off, any idea how Bunt Spenden did this bow animation? (https://i.imgur.com/5YFKk3A.png). I want to say it had to have been an inline video, because I couldn’t find it as an svg. Super cool though, just curious. :)

    Reply
  3. David Kizler

    Hi Petr,

    Great post. I’ve been trying to wrap my head around Scroll Magic, but there are just so many moving parts. I’m feeling comfortable with Greensock. It has a very straightforward syntax that I can remember, but Scroll Magic gets me so focused on the code that I forget what I’m even trying to do.

    Do you happen to know of a simpler way to initiate Greensock animations on scroll? I don’t need great control of scroll position, but basically want to say: Initiate all Greensock Animations when the element is in the viewport.

    Perhaps, I just need to keep wrestling with Scroll Magic, but just wondering if there may be a simpler alternative or even some lines of jquery that can integrate with Greensock?

    Reply
    1. Petr Tichy Post author

      David, thanks for the feedback and comment. ScrollMagic is currently the best way for implementing GreenSock for scrolling animations.

      It takes time and some practice to become fluent with it.

      What’s the most confusing about ScrollMagic for you and have you used Skrollr?

      Reply
      1. Mufeed Ahmad

        I am working on a very critical project for couple of days and trying very hard to get the horizontal scroll done like
        http://www.pixxelfactory.net/jInvertScroll/ site. But no luck. Can anyone please help me. Then I have massive elements to animate in different- different scenes. Its only possible if I crack this horizontal background parallax.

        Any help much appreciated.

        Reply
    2. Jan Paepke

      Hi David,
      I’d also like to know what in particular you find confusing about ScrollMagic and how you think it can be improved.
      Any input is highly appreciated.

      Reply
      1. David Kizler

        Hi Jan,

        I’m much more a designer than developer just to orient my feedback. I like to be able to dive in and just start designing, animating, etc. I guess the problems for me comes in around having multiple dependencies and defining variables.

        My suggestions would be for ScrollMagic to be included in TweenMax to reduce dependencies. I then wish it could be directly connected to the GSAP syntax so that the GSAP syntax could basically add one more variable that says when the browser or object hits a certain point to initiate the tween. I realize full integration of these 2 platforms my not be possible in reality.

        So, it’s not that ScrollMagic is confusing as much as I wish the 2 frameworks could be fully integrated so there are less dependencies and variables to worry about.

        Reply
        1. Jan

          Hi David,

          thank you very much for your feedback.
          I’ll try to clarify some things.

          As Petr pointed out in point 3 (Syntax complexity) skrollr is a lot easier to grasp. Especially for people who have little experience in JavaScript its the easier (and recommended) way to go.
          I even say so in ScrollMagic’s readme.
          The upside of a little more complexity though, is a lot more control and freedom. It enables the developer to be very precise for the most complex animations and circumstances.
          Making it simpler would ultimately mean to narrow ScrollMagic’s range of flexibility. But since is the main difference over Skrollr in my opinion, this is not going to happen.

          I think the steepest learning curve is to understand the basic design pattern of ScrollMagic.
          Once you understood that, things become very obvious and start to make sense.
          Read more on it here: Getting Started : How to use ScrollMagic

          ScrollMagic can not be incorporated into GSAP, as that is first and foremost an animation framework and ScrollMagic isn’t (a common misconception). Animating is just one of the things you can use it for.
          You wouldn’t expect jQuery to be integrated into GSAP and vice versa, would you?

          That being said we of course strive to make it as accessible as possible and your concerns are valid.
          So you might be happy to hear that ScrollMagic 2.0 (currently in alpha phase) is going to be a standalone module.
          There is no dependency on jQuery or GSAP anymore, but if you chose to use them, you can – there will be plugins to connect to both included in the ScrollMagic package.

          Again this is done to leave the utmost of freedom to the developer.
          Having specialized frameworks might seem as a drag at first in terms of project management. But it’s highly preferable over bloated all-in-one solutions where you have to include a 200kb lib for just one feature.
          A lot of effort, time and knowhow went into the development of frameworks like GSAP and jQuery, so they exist for a reason and are specialized in what they do.

          It wouldn’t make sense to try to replicate cheap knock-offs of them just for the sake of simplicity. Again it’s the above mentioned trade-off between complexity and freedom.

          Aside from dropping dependencies there is another thing that will make ScrollMagic easier to use in conjunction with GSAP:
          A lot of times people use ScrollMagic to trigger a TweenMax.to animation.
          Currently this has to be done like this:

          scene.setTween(TweenMax.to(elem, 1, params));
          

          Granted this is a little much for people unfamiliar with oop.
          But in ScrollMagic 2.0 you will be able to achieve the same thing as above like this:

          scene.setTween(elem, params);
          

          That should make things easier, right?

          Thanks for your feedback and I hope I could clear some things up.

          Best regards,
          Jan

          Reply
        2. Petr Tichy Post author

          I think I get your point David, as I said it takes some time and practice, but once you get the AHA moment with ScrollMagic you’ll see the endless possibilities.

          I’ll be adding some simple ScrollMagic demos and tutorials in the coming weeks. Stay tuned.

          If there is any particular effect you would like to learn in these tutorials, just shoot me an email or leave a comment here.

          Cheers
          Petr

          Reply
        3. Justin O'Neill

          Hi David, I found a great little tutorial from Scotch.io that helped me jumpstart my process. Like you, I’m more of a designer then developer. Check it out and I hope it helps!

          https://scotch.io/tutorials/building-interactive-scrolling-websites-with-scrollmagic-js

          Reply
  4. increeddeveloper

    How can the effect of sparkling pixie dust be brought across using skrollr?
    You know the effect of a magic wand and sparkling stars around the wand as the wand moves.

    Thanks
    Increeddeveloper

    Reply
  5. Sebastian

    It’s great to see this lesson between this awesome plugins and in the comments the plugin creator interacting with users. I’m agree, i try Skrollr and it’s great, simple and straightfoward, but have some limitations like if you stop scrolling no animations happens. SCROLLMAGIC inthe other hand is very powerful and usethe excellent Gsap library, for me it’s great because been using it for some years. Maybe at fist its a little complex and the examples are little confusing, but i see the new documentation it’s very clear and if you take some time and effort it’s notso hard. CONGRATS TO ALL and thanks for your work! Sebastian.

    Reply
  6. Ashish Desai

    Many sites that i have visited and which use Skrollr.js seem to be choppy and sluggish. There is some sort of flickering on the parallax containers. I am not sure if skrollr.js is using the GPU acceleration or not. I am assuming not.

    Reply
  7. Jeremy Daley

    I think it’s important to note the power of skrollr when it comes to CMS-driven sites. Dependence on data attributes is one of skrollr’s biggest accomplishments in my mind. If I loop through ‘n’ number of items, I can set each’s data attribute to a dynamic, calculated percentage (based on its index) in my view. While I’m sure you could build on “ScrollMagic” to accomplish this with you own JS, skrollr does it out of the box.

    Reply
      1. Jeremy Daley

        It’s currently live… check out http://www.mars.com

        There’s the homepage, and then these other 2:
        http://mars.com/global/doing-our-part/principles-in-action
        http://mars.com/global/about-us/history

        Like my original comment suggested… while I had to put some JS in there to handle a number of things, that JS never had to change regardless of how much new content was added.

        Reply
        1. Petr Tichy Post author

          Great, thanks for sharing the link with us Jeremy! I like the creative layout.

          Just curious, why have you decided to turn the scrolling animations off for smaller viewports?

          Reply
          1. Jeremy Daley

            Onscroll performance, creative decisions, ios hates me… just a number of complex issues that never come with allowance for the hours to tackle =/

          2. Jeremy Daley

            The switch between desktop and otherwise created fixed position hurdles that required listening for scroll on completely different containers. Along with a footer reveal, more code was introduced to make a golden egg than it could contain. In retrospect, I don’t think the UX for “parallax” is even a good idea at all viewports.

          3. Petr Tichy Post author

            I completely agree, it surprises me how many people are trying to implement the same concept for all devices and browser sizes, especially the beginners.

  8. Miguelito Mossimo

    Great review, but not one mention of responsiveness for mobile devices? Would be great to know how well these work on mobile devices before taking the time to implement. Keep up the amazing work :)

    Reply
      1. Justin O'Neill

        Why?

        I’ve been trying to develop mobile first everything I do now. Especially since Google released there material design guidelines.

        I’ve tested many different frameworks out for mobile and pay attention to things like load time, FPS, ease of use…

        The best I’ve found so far are MaterializeCSS, ParallaxJS, and ScrollMagic.

        Reply
  9. Kathryn Crawford

    ScrollMagic! I’m a front end developer, and already use greensock almost exclusively for css/svg/whatever animation. Scrollmagic was the obvious choice, and I feel a lot more freedom to be creative with behaviors.

    Reply
  10. Sebastian

    Great article, i used Scrollmagic and it´s great, and Skrollr seems to be out of work. “skrollr hasn’t been under active development since about September 2014 … and I don’t have any plans for doing major changes to it. …Please consider this before using skrollr in production as problems with new browser versions, especially on mobile, will most definitely surface.”

    Reply
    1. Petr Tichy Post author

      Hi Sebastian, thanks for the heads up, I am sure everyone is aware that Skrollr is not under active development for some time, but still works fine for majority of projects and browsers.

      As always I suggest to turn scrolling animations of for mobile and touch devices and recommend using ScrollMagic for more JS advanced users.

      Reply

Leave a 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>