What do start and end mean in ScrollTrigger?

Both are two-part strings: trigger position, then scroller position. start: 'top 80%' fires when the trigger element's top reaches 80% down the viewport; end: 'bottom top' releases when its bottom passes the viewport top. The builder lets you feel each combination live.

What is the difference between scrub and toggleActions?

scrub ties animation progress directly to the scrollbar - a number adds that many seconds of catch-up smoothing. toggleActions plays the tween as a one-shot instead, with four slots covering enter, leave, enter back, and leave back.

Does pin need extra markup?

No. ScrollTrigger wraps the pinned element in a spacer automatically. Keep pinned elements out of flex parents where the spacer would distort layout, and animate a child rather than the pinned element's own position.

ScrollTrigger Builder

Scroll this frameprogress 0.00

Scroll down - the section below is the trigger.

.section (trigger)

The frame is the page - scroll it to feel the trigger.

scrolltrigger.js

The copied config targets your page scroll. The preview adds a scroller option internally because the frame above is its own scroll container.

FAQ

What do start and end mean in ScrollTrigger?: Both are two-part strings: trigger position, then scroller position. start: 'top 80%' fires when the trigger element's top reaches 80% down the viewport; end: 'bottom top' releases when its bottom passes the viewport top. The builder lets you feel each combination live.
What is the difference between scrub and toggleActions?: scrub ties animation progress directly to the scrollbar - a number adds that many seconds of catch-up smoothing. toggleActions plays the tween as a one-shot instead, with four slots covering enter, leave, enter back, and leave back.
Does pin need extra markup?: No. ScrollTrigger wraps the pinned element in a spacer automatically. Keep pinned elements out of flex parents where the spacer would distort layout, and animate a child rather than the pinned element's own position.