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
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.
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 is the winner when it comes to the number of resources out there.
2. Documentation
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
ScrollMagic is my winner when it comes to the structure of the documentation.
3. Syntax Complexity
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 syntax is simple once you get your head around the data attributes.
4. Number Of Features
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
The feature rich GreenSock library gives ScrollMagic a massive advantage when it comes to creating more complex scrolling animations and timelines.
5. Play-Off
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
The future looks very bright for ScrollMagic.
The number of features and options make it currently the best scrolling library out there.
Final Verdict
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
Squarespace 7
Kia
ScrollMagic Examples
Click on the thumbnails to see these creative ScrollMagic examples.
Tink
Bunt Spended
Lempens Design
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.
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)
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? (http://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. 🙂
Thanks Mason, I will look into it and might post it in my future deconstructions. Cheers
It looks to me like a use of the Vector tracing function.
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?
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?
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.
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.
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.
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:
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:
That should make things easier, right?
Thanks for your feedback and I hope I could clear some things up.
Best regards,
Jan
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
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
Hey David, I’ve just published a new ScrollMagic tutorial. Check it out.
I hate Tomatoes too !
And i fricken love parallax sites !!!
your classes have really helped 🙂
Thanks Ariel and welcome to the club of tomato haters and scrolling animation lovers 🙂
Yay 😀
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
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.
Thanks for the comment Sebastian. What’s your favorite ScrollMagic or GSAP website or effect?
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.
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.
Good point Jeremy. Let me know when your project is live, it might give others an idea what kind of Skrollr pages can be CMS driven.
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.
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?
Onscroll performance, creative decisions, ios hates me… just a number of complex issues that never come with allowance for the hours to tackle =/
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.
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.
Jeremy, could write a quick tutorial/codepen on how you created dynamic [data] attributes? Thanks!
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 🙂
Hi Miguelito, regardless of which framework you decide to use, I still recommend turning them off for mobile and touch devices. Here’s a guide on how to do it. Cheers Petr
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.
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.
Thanks Kathryn, you’re right once you know GreenSock, then ScrollMagic is the best option.
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.”
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.
Scrollreveal it´s a good player too!
https://scrollrevealjs.org/
Yep, that is also an option. Here is a more detailed breakdown of all the options – The Guide to Scrolling Animation Libraries
What’s the best way to turn off skrollr when rendering in a mobile device?