Symbols
Reusable artwork: edit it once and every instance follows, each with its own timing.
Home/Features
FEATURES
Every property gets
its own track.
Everything the editor does, in the order you use it: draw the artwork, style it, animate it, get the timing right, make it respond, and work faster while you do.
01
Draw
Make the artwork, or bring it in. Tools stay active after each shape, the way they do in design apps.
Every tool is one key away
Select V, pen P, rectangle R, text T, bones B, pins W. Letters go by key position, so they work on any keyboard layout. Snapping and guides keep things lined up, and the Layers panel shows groups, masks and clip paths as a tree.
Pen and pencil P
Click for a corner, drag for a curve, or draw freehand. Edit any node afterwards.
Shapes
Rectangles, ellipses, polygons, stars and lines. Sides, points and corner radius stay editable, and animate.
Text and fonts
36 Google Fonts grouped by script, your computer’s fonts, right-to-left text, and text to outlines.
Images
PNG, JPG, GIF, WebP, AVIF, HEIC and more, resized and compressed on export.
Booleans and align
Union, subtract, intersect and exclude; align, distribute, flip and turn in one bar.
Try the keys
Press a key on your keyboard, or click one, to see what the tool does.
Pick a key to see what the tool does.
02
Style
Color, strokes, effects and masks. Every setting here is a property, so every one of them can be keyed.
Filters you stack and animate
Blur, drop shadow with spread, glow, inner shadow and glow, color adjustments, color overlay and outlines. Each filter is a card: collapse it, drag it to reorder, and key any of its values.
Fill and gradients
Solid, linear or radial. Stops, angle, centre and radius all blend between keyframes.
Strokes
Width, line ends and joins, dash patterns that blend, and alignment: centre, inside or outside.
Masks and clipping
Soft masks by opacity or brightness, so a gradient wipe reveals as you’d expect.
03
Animate
Key anything in the inspector, then reach for the tools made for motion.
A diamond beside every property
Click it to start a track. From then on, change the value anywhere on the timeline and a keyframe appears there. Grey is off, an outline is animated, filled means a key sits under the playhead.
Shape morphing
Any path into another; nodes are matched so the in-betweens stay clean.
Motion paths
Any path becomes a route, followed at an even speed, turning with the curve.
Trim path Shift D
Lines that draw themselves on, and dashes that travel.
Bones and IK B
Rig a stalk, an arm or a tail; pose it forward or by inverse kinematics, squash and stretch it.
Pins and mesh warp W
Bend a path, an image, text or a whole group by its pins; pins can follow bones.
Animation presets
Entrances, exits, emphasis, strokes, color and filters, slotted in at the playhead.
04
Timing
Where an animation starts to feel right: when things happen, and how they get there.
The Easing panel
Select keyframes and press Easing: In, Out or In-Out, presets from Linear to Bounce, and a curve editor whose range fits overshooting curves like Back and Elastic. Save your own curve as a preset.
The timeline
One row per property. Select layers and keys with Ctrl and Shift; keys snap to the playhead and to each other.
Graph editor
Open a track into a value graph: drag keys for value and time, shape the easing with handles.
Onion skin Alt O
Outlines of where the selected layers were and will be, before and after the playhead.
05
SVG interactions
How the file plays and interacts once it’s on a page. You choose this when you export.
Linked to scroll
The page’s scroll becomes the playhead: scrolling down plays it, scrolling back plays it backwards. Pick when it plays, smooth the wheel steps, and try it on a test page right in the Export window.
Triggers
Play on load, on hover, on click, when scrolled into view, or from your code.
Hyperlinks
Any layer can link to a page, an email or a phone number, in a new tab or the same one.
Player API
Play, pause, seek, reverse and change speed from your code, with events.
06
Workflow
The things that add up over a day of animating.
Edit many layers at once
One transform box around the whole selection: scale, rotate and drag them together. The inspector shows the properties they share, “Mixed” where they differ, and a change lands on all of them.
Select same
Every layer with the same fill, stroke, font or kind, inside groups too.
Numbers you can nudge
Drag any number, or press ↑ / ↓ to change it live: Shift ×10, Alt ×0.1.
Shortcuts on any layout
F1 lists every shortcut with search; Hebrew or Russian layouts work too.
Help where you need it
An ⓘ beside inspector titles and labels explains them, on hover or with Tab.
Spell check
Text you edit on the canvas uses your browser’s own spell check.
Projects are files
Saved as you work, reopened from Open recent, with a thumbnail in your file manager.
+
Beyond the editor
Three things big enough for a page of their own.