Open the editor

Home/Help/Import and export/When it starts: load, hover, click, scroll

IMPORT AND EXPORT

When it starts: load, hover, click, scroll

Playback › Starts, in the Export window, decides what sets the animation going on your page: the page loading, the mouse, a click, scrolling to it, or your own script. The preview works the same way, so you can try each one there.

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. When it plays is under Playback.

  2. Start it on mouse over

    Starts is On load: it plays as soon as the page shows it. Choose On mouse over. A row appears, On mouse out, for when the pointer leaves: Pause (the default), Reverse back to start, Jump to start or Keep playing.

  3. Try it in the preview

    Move the pointer over the preview: the balloon starts. Move it away and it pauses where it is.

  4. Start it on click

    Choose On click. The row under it becomes Second click: Pause, or Reverse back to start, Jump to start, Restart or Keep playing.

  5. Click the preview

    Click the preview to start it, and again to pause it. On your page, the pointer turns into a hand over it.

Good to know. On scroll into view starts it when about a third of it is in the window, and Scrolled away says what happens when it leaves. Linked to scroll ties it to the scroll itself, and Programmatic waits for your page's script (see The player API). CSS only offers On load and On mouse over, and on mouse out it can only pause or jump to the start. Less motion decides what visitors who ask their system for less motion see: the animation playing (the default), its first frame or its last.

Keys

Ctrl EExport