Learn ScrollMagic from scratch.

A Basic ScrollMagic Template

Free to download and use for personal or commercial use.

Contains CSS Animations triggered at a specific time.

Scroll Down

ScrollMagic Controller

What is ScrollMagic Controller?

The Controller is a scrolling container (body by default) that can have one or more Scenes attached to it.

Read more

ScrollMagic Scene

What is ScrollMagic Scene?

Scene is a tween or collection of tweens (timeline), that is triggered at a specific time as the user scrolls down the page.

Read more

ScrollMagic triggerElement

What is a triggerElement?

triggerElement is a DOM element that will trigger Scene when the top of the trigger element reaches the center of the viewport.

Read more