# ScrollTrigger

Motion bundles GSAP's
[ScrollTrigger](https://gsap.com/docs/v3/Plugins/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](/docs/motion/usage/breakpoints.md)
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](/docs/motion/usage/timelines.md) 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](/docs/motion/usage/defaults.md#scrolltrigger).