Parallax Scrolling Master Class by Petr Tichy

What's new in ScrollMagic 2.0? Want to learn ScrollMagic from scratch?

Scroll down to find out.

Removed Dependencies

ScrollMagic is now a stand alone library and doesn't require GSAP or jQuery.

  • No need to load GSAP or jQuery
  • More flexibility
  • New file structure
  • 18kb minified and 6kb gzipped

Works With Velocity.js

Use ScrollMagic to trigger Velocity.js animations.

  • New plugin 'animation.velocity'
  • Works with 0 duration scenes
  • Great for developers familiar with jQuery's $.animate() API

Easier Debugging

Use debug.addIndicators to trigger animations at the right time.

  • Huge performance optimization
  • Great for precisely triggering animations at the right time
  • Easily review and update scene duration

Responsive Duration

You can now set the Scene duration in percentages eg. 100%.

  • It will be calculated in relation to the size of the scroll container.
  • More flexibility for responsive sites.
  • Works with both vertically and horizontally scrolling containers.

Other updates

  • better perfomance
  • removed Scene.setPin() option pinClass
  • removed scene method triggerOffset()
  • lots more info and warning messages
  • and much more

Want to learn ScrollMagic from scratch?

Sign Up

Don't miss out on more free ScrollMagic demos and tutorials from the guy who hates tomatoes.