Are you struggling to get your head around the ScrollMagic API? Do you find it hard to learn from the official ScrollMagic documentation?

Check out the following video, where I explain all the basic terms in a more visual way.

Not a single line of code, I promise.

Video

Other ScrollMagic Videos

• How to trigger ScrollMagic Scene for multiple elements
• ScrollMagic Workshop In Progress
• Railsware.com – ScrollMagic deconstruction

ScrollMagic Controller

ScrollMagic Controller is a reference to a DOM element that has a scrollbar.

In most cases this is the whole body.

ScrollMagic Scene

ScrollMagic Scene is an invisible layer that could contain a single tween or timeline.

It could be also used to change a CSS class on a specified element.

ScrollMagic triggerElement

ScrollMagic triggerElelement is any HTML element that will trigger our tween or timeline.

It is always the position of the top of this element that will be used for the trigger.

ScrollMagic triggerHook

ScrollMagic triggerHook is set to the middle of the viewport by default.

This means that when the top of the triggerElement is in line with the triggerHook, the animation will be triggered.

If you want your animation to start when the element enters the viewport set the triggerHook to 1.

ScrollMagic Offset

To be in a precise control of your animation you can also define an offset.

Setting offset to 200 will delay the triggering of the animation, which means that the user will need to scroll extra 200 pixels for the animation to start.

ScrollMagic Duration

By default ScrollMagic only triggers animation and the duration of the animation is defined in the GreenSock tween or timeline.

When you set the scene duration to 200, it will take the user 200 pixels of scrolling to see the whole tween or timeline from start to finish.

In other words, the user will be in full control of the playback of the animation.

Conclusion

I hope that this visual guide will help you to get started with ScrollMagic, especially if you are a visual learner like me.

What are your other questions or biggest struggles when it comes to ScrollMagic?

Let me know in the comments below and will try to answer them in my future tutorials.