Open the editor

Home/Help/Timing/Staggering instances

TIMING

Staggering instances

The instances of a symbol share its animation, so they all move together. Give an instance a time offset and the same animation starts later on it: a row of instances plays one after another.

Three dots hop one after another, like a loading indicator, then rest until the animation starts over.
WHAT YOU’LL MAKE

Three dots hop one after another, like a loading indicator, then rest until the animation starts over. This one is the real exported SVG, playing.

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

Step by step

  1. Select the middle dot

    The three dots are instances of one symbol, Dot, so they hop together. Click the middle dot on the canvas: the inspector opens on its Instance section.

  2. Give it a time offset

    Type 0.3 in Time offset and press Enter. This instance's hop now starts 0.3s later: in the timeline, its Ball keyframes move along.

  3. Select the last dot

    Click the dot on the right. Time offsets are set one instance at a time: with several layers selected, the Instance section isn't there.

  4. Give it a longer offset

    Type 0.6 in its Time offset and press Enter. Its hop starts 0.6s after the first dot's.

  5. Play it

    Press Space. The dots hop one after another, 0.3s apart, and rest until the 3-second animation starts over.

Good to know. Edits inside the symbol still reach every instance, and each keeps its offset. In the JS export an instance with an offset is written out in full rather than shared, so the file grows a little. To stagger the instances' own movement (each one sliding in, say), select them and apply a preset with Stagger.

Keys

SpacePlay and pause
HomeGo to the start