Scroll-driven animation
On a web page, your piece can follow the visitor's scroll instead of playing on its own. As they scroll down, the playhead moves through the timeline; as they scroll up, it runs back. It turns an animation into part of the page: cards that fan out as the section comes into view, a product that turns as you read about it.
How it works
The scroll is a number from 0% to 100%, and it maps straight onto the whole timeline: 0% is the start, 100% the end. There's nothing to set up in the scene. Animate it as usual, and the scroll plays it.
Tip
Make the piece read well at any point, not only at the end. A visitor can stop scrolling anywhere.
Try it in the editor
- Click Preview in the top bar.
- Drag Scroll in the Preview bar. It stands in for the page's scroll.
- Leave drives the timeline checked so the playhead follows it.
Choose how an embed scrolls
When you publish the piece, the Scroll list in the Publish dialog sets what drives it on your page:
| Scroll | What it follows |
|---|---|
| Follows the page as it scrolls by | The piece's own trip through the window: 0% when its top reaches the bottom of the window, 100% when its bottom leaves the top. The default. |
| Follows the whole page | The whole page, from top to bottom |
| Plays on its own | Nothing: it loops by itself, and pauses while it's off screen |
The choice goes into the snippet you put on your page, so you can also change it there. See Publish and embed and Embed API.
Things to know
- A piece follows the scroll from the first time the page scrolls. Until then, it plays on its own.
- A running state machine moves the playhead itself, so it isn't driven by the scroll.
- Code layers scroll their own pages with the same number.