Open the editor

Home/Help/Import and export/Linked to scroll

IMPORT AND EXPORT

Linked to scroll

Linked to scroll ties the animation to the page's scroll instead of the clock: scrolling down plays it, scrolling back plays it backwards. Use it for an animation that unfolds as the reader moves down the page.

Do it in the editor: guided tour5 steps · about 3 minutes · opens a practice scene

Step by step

  1. Open Export

    Click Export in the top bar, then Animated SVG across the top of the window.

  2. Choose Linked to scroll

    Under Playback, set Starts to Linked to scroll (JavaScript only). Repeat, Direction, After the end and Speed don't apply, so they are hidden, and the preview becomes a small test page.

  3. Scroll the test page

    Scroll the test page in the preview: the balloon follows the scroll, forwards and back. Dashed lines show where in the window it starts and ends, and the panel beside it shows how much has played.

  4. Choose where it plays

    Plays is While it crosses the window: from its top coming in at the bottom to its bottom leaving at the top. Choose While it scrolls in, until centred, or While it scrolls out, or Custom to pick the edges and where in the window. Smoothing (0.3 s) lets it glide after each mouse-wheel step.

  5. Put it on your page

    Click Embed in your site. The SVG has to see your page's scroll: paste its code into the page, or use an object tag with a file from the same site. In a box that scrolls on its own, it follows that box; as an image (an img tag) it shows only its first frame.

Good to know. It works with the embedded player and with the external one; an external player has to be version 1.2.0 or later. CSS only can't link to scroll.