Click to select a layer · Shift+click to select several
Layers
Left/Right to move, Alt+Left/Right to change length, Delete to remove
How to use
- Load an SVGUse the button at the top right to pick an .svg file or paste its code. You can also drop a file anywhere on the page. Exports from Illustrator and Figma work as they are.
- Select layersClick a shape on the canvas or a row in the timeline. Shift+click selects several.
- Add an animationPick one under “Add animation” and a bar is added at the playhead (the green line). There are 30+ motions in five groups: In, Emphasis, Out, Stroke and Change. With several layers selected, each one starts 0.1 s after the previous.
- Adjust the timingDrag a bar to change when it starts and drag its ends to change its length. Bars snap to other bars and to the playhead. Type exact values in the Properties panel. For a group, “One by one” animates the elements inside it one after another (for example, letter by letter).
- Export the code“Export code” gives you GSAP code to paste into your page. You can also save it as an HTML file.
Shortcuts
- Space Play / pause
- ⌘Z / Ctrl+Z Undo
- ⇧⌘Z / Ctrl+Y Redo
- Delete Remove the selected animation
- ⌘D / Ctrl+D Duplicate
- ←→ Move a bar by 0.05 s (Shift: 0.5 s, Alt: change length)
- Esc Clear the selection
* Stroke drawing, morphing and motion paths use GSAP’s free plugins (DrawSVG, MorphSVG, MotionPath). The exported code includes the script tags it needs.