ScrollTrigger

View as Markdown

Motion bundles GSAP’s ScrollTrigger plugin, so no special syntax is needed: scrollTrigger is an option of the animation object like any other.

HTML

<div class="animate-from:opacity-0|scrollTrigger-&"></div>

& is the element itself, so the animation starts when the element scrolls into view. Motion moves an element’s scrollTrigger onto the timeline it creates for that element, so the whole animation, from and to together, follows the scroll.

Nested properties

scrollTrigger is an object, so dot notation sets its options:

HTML

<div
  class="animate-from:opacity-0|scrollTrigger.start-top|scrollTrigger.trigger-&"
></div>

Use an underscore for a space, as in scrollTrigger.start-top_center.

Breakpoints

Scroll trigger options follow breakpoints like every other option: with animate-to:x-10|scrollTrigger.start-top and animate-@lg:to:x-20|scrollTrigger.start-bottom, the trigger starts at bottom while lg matches and at top otherwise.

Timelines

An element inside a tl timeline plays as part of that timeline, so put the scroll trigger on the timeline element instead, written as an object:

HTML

<div class="animate-tl animate-scrollTrigger:trigger-&|start-top_center">
  <div class="animate-from:opacity-0"></div>
</div>

Every element

To give every animation a scroll trigger, set it in the timeline defaults.