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.
Other ScrollMagic Videos
- How to trigger ScrollMagic Scene for multiple elements
- ScrollMagic Workshop In Progress
- Railsware.com – ScrollMagic deconstruction
ScrollMagic Controller is a reference to a DOM element that has a scrollbar.
In most cases this is the whole
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 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 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
To be in a precise control of your animation you can also define an
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.
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.
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.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.