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.
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.
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 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.
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.
Skrollr is the winner when it comes to the number of resources out there.
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 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 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.
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.
Data attributes is the key to animating with Skrollr.
As I mentioned above, it can be very confusing especially at the start.
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.
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.
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 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 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.
The feature rich GreenSock library gives ScrollMagic a massive advantage when it comes to creating more complex scrolling animations and timelines.
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.
The future looks very bright for ScrollMagic.
The number of features and options make it currently the best scrolling library out there.
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.
Here are some examples of sites which use both Skrollr and ScrollMagic to give you a taste of what you can do with them.
Click on the thumbnail to see these creative Skrollr examples.
Click on the thumbnails to see these creative ScrollMagic examples.
What’s your take on Skrollr or ScrollMagic? Do you have a preference and why?
Let me know in the comments below.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.