ScrollMagic 2.0

What’s New In ScrollMagic 2.0?

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.

VIEW DEMO

1. Removed Dependencies

ScrollMagic 2.0

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

ScrollMagic 2.0

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

ScrollMagic 2.0

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

ScrollMagic 2.0

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.

VIEW DEMO

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.

100% Privacy. Guaranteed! Powered by ConvertKit

4 thoughts on “What’s New In ScrollMagic 2.0?

  1. increeddeveloper

    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

    Reply
    1. Petr Tichy Post author

      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?

      Reply
  2. Madmotts

    Is there a reactjs version or tutorial for scrollmagic? I guess i’d just load it on componentDidMount and remove on componentWillUnmount().

    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>