Jan Paepke worked hard over the last few months on a brand new version of ScrollMagic.
The latest ScrollMagic 2.0 brings a lot of new features, changes and updates.
In this post you’ll find out exactly what’s new and what are the new exciting features.
1. Removed Dependencies
Probably the biggest update in ScrollMagic 2.0 is the new file structure and the removal of all dependencies (GSAP or jQuery).
This makes ScrollMagic 2.0 very slim, the minified version being only 18Kb and 6Kb gzipped.
What does that mean?
You don’t need to load unnecessary jQuery library or Greensock.
This will make the download time of your website faster.
2. Works with Velocity.js
If you are not familiar with Greensock syntax you can still use ScrollMagic to trigger your jQuery animations.
Velocity.js is an animation engine with the same API as jQuery’s $.animate().
What does that mean?
ScrollMagic can now trigger Velocity.js animations. This is a great option for developers not familiar with Greensock.
Please note that Velocity.js doesn’t support timeline scrubbing. This means that only scenes with 0 duration will work.
3. Easier Debugging
The new plugin debug.addIndicators makes debugging very easy and lets you easily review and update scene duration.
What does that mean?
You can visually see when each ScrollMagic scene starts or ends and precisely control your scrolling interactions and animations.
4. Responsive Duration
Have you ever wanted to create a responsive scrolling animations? ScrollMagic 2.0 lets you set the scene duration in percentages eg. 100%.
What does that mean?
By setting a scene duration in percentages you’ll get more flexibility when it comes to responsive sites.
The duration of your animation will be calculated in relation to the size of the scroll container.
This works with both vertical and horizontal scrolling websites.
5. And much more
Check out the change log for a complete list of all the features, changes and updates.
Also don’t forget to check out the brand new demo page.
Do you want to learn ScrollMagic? You might also like SVG Scrolling Animation Triggered By ScrollMagic tutorial.
Are you not sure if ScrollMagic is for you? Check out the Skrollr vs ScrollMagic comparison.
Conclusion
Are you planning on using ScrollMagic in your upcoming project? Or are you finding it hard to start with ScrollMagic?
Let me know in the comments below.
Until next time, happy coding.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.
I would like to know how is the sparkle effect brought about using skrollr?
Here is the custom piece of code for its js:
http://scrollmagic.io/js/demo.js
Need to know its integration with skrollr.
Thanks
Saroj
Hey Saroj, it’s build using GreenSock, replicating similar randomized sparkle effect using Skrollr would be very time consuming and would not be as realistic as the ScrollMagic one.
Why don’t you use ScrollMagic?
Is there a reactjs version or tutorial for scrollmagic? I guess i’d just load it on componentDidMount and remove on componentWillUnmount().
Hi Madmotts, I haven’t played with React and ScrollMagic together, but might look into it in the future. Cheers