SVG Motion Studio — Online SVG Animator with Timeline, Lottie & ScrollTrigger Export

Every keyframe supports translate X and Y (position offset in pixels), scale, rotation in degrees, opacity (0–1), fill color, blur in pixels, brightness multiplier, stroke-dasharray, and stroke-dashoffset. You can also set a custom per-segment easing curve using the visual bezier editor, so the animation can ease differently between each pair of keyframes.

Yes. The Export Code panel has three tabs: CSS (standard @keyframes with animation shorthand), GSAP (a gsap.timeline() with fromTo calls for each layer segment, respecting per-layer delay and stagger), and Framer Motion (motion.tag JSX with animate and transition props for React projects). All three formats are derived from the same keyframe data so they stay in sync.

Click the ∿ button next to any easing selector to open the visual cubic-bezier editor. Drag the two control handles inside the square grid — the curve stretches freely beyond the grid for bounce and spring overshoot effects while the handles stay within reach. The dropdown auto-updates to show the live cubic-bezier() value. Nine quick-apply presets (Ease, Ease In, Bounce, Spring, Snappy, etc.) let you start from a named shape and fine-tune from there.

Stagger adds a delay offset between layers based on their order. Setting stagger to 0.15s makes layer 0 start at 0s, layer 1 at 0.15s, layer 2 at 0.30s, and so on. This creates the cascading entrance effect used in most modern motion design without manually setting a delay on every layer. Stagger is included in CSS, GSAP, and Framer Motion exports.

Yes. Each keyframe has Blur (px) and Brightness fields. Animating blur from 0 to 12 with the Blur Out preset creates a focus-out exit. Animating brightness from 1 to 1.8 and back creates a glow pulse. These values produce a CSS filter: blur() brightness() rule in the exported CSS and are included in GSAP and Framer Motion output as well.

Motion path lets a layer follow a custom SVG path using CSS offset-path. Enable it in the Layer inspector, paste any SVG path d-attribute value, and the element animates along that curve over the animation duration. Motion path composites with normal transform keyframes — the element can simultaneously follow a path and scale, rotate, or fade.

Yes. Every keyframe change — adding, removing, moving, or editing a frame — is tracked in a history stack. Press Ctrl+Z (or Cmd+Z on Mac) to undo and Ctrl+Y (or Ctrl+Shift+Z) to redo. The undo and redo buttons in the header also show which operations are available.

Click the folder icon in the header to open the project panel. Type a name and click Save to save the current SVG and all animation settings as a named project. Click Save as New to create a separate copy with a new name. All saved projects appear in a scrollable list — click any project name to switch to it instantly. Click the pencil icon to rename a project inline, or the x button to delete it (with a confirmation modal). Projects are stored in IndexedDB in your browser, so they persist across sessions without any sign-up. GitHub Gist sync pushes the full library — including all projects and deletion records — to a private Gist, making the same library available on every device.

Yes — in two ways. The multi-project library in the header lets you save unlimited named projects directly in the browser's IndexedDB. Click the folder icon in the header, type a project name, and click Save. Your projects persist across sessions and appear in the project picker for instant one-click switching. You can also click Export JSON to download a portable backup file and Import JSON to restore it. For cross-device persistence, connect GitHub Gist sync: paste a GitHub Personal Access Token with gist scope, click Save, and the studio automatically pushes your full project library to a private Gist. On any device, the latest library is fetched and merged on load.

GitHub Gist sync saves your entire multi-project library to a private GitHub Gist so your projects are accessible from any device. Click the GitHub icon in the header, paste a GitHub Personal Access Token (create one at github.com/settings/tokens with only the gist scope checked), and click Save. The studio finds or creates a private Gist named sms-motion-project.json and begins syncing automatically — pushing after every change (5-second debounce) and pulling on load. The merge logic compares each project's updatedAt timestamp independently, so edits and renames on different devices never overwrite each other. Deleted projects are stored as tombstone records so deletions also propagate correctly. The token is stored in your browser's localStorage and shared with all FWD tools — if you already set it up in another tool, SVG Motion Studio picks it up immediately.

Yes. The Export Code panel has a Lottie tab that generates a Lottie JSON file from your keyframe data. Lottie is the most widely supported SVG animation format — used by iOS, Android, React Native, and web apps via the lottie-web player. The export maps your translate (position), scale, rotation, and opacity keyframes to Lottie's transform properties at 60 fps. Click Download .json in the Lottie tab to save the file and load it in any Lottie player.

The ScrollTrigger tab generates GSAP animation code that plays as the user scrolls the page, using the GSAP ScrollTrigger plugin. The output includes gsap.registerPlugin(ScrollTrigger), a timeline with a scrollTrigger configuration block (trigger, start, end, toggleActions), and the same fromTo segment calls as the standard GSAP export. Change the trigger selector to your container element, adjust start and end positions, and optionally uncomment scrub: true to link the animation progress directly to the scroll position instead of playing it once.

Select the source layer, then click Copy Keyframes in the Keyframe Clipboard section of the inspector (or press Ctrl+C when not focused on an input field). The keyframes are stored in the clipboard panel. Then select the target layer and click Paste to Layer (or press Ctrl+V). The pasted keyframes replace the target layer's existing keyframes. This is useful for applying the same entrance animation to multiple layers before tweaking timing and values individually.

Drag the ≡ handle on the left edge of any layer row in the Layers panel to reorder it. Drag up or down — a highlight border shows where the layer will drop. Layer order affects stagger: layer 0 starts first, each subsequent layer is offset by the stagger value. Reordering is also reflected in the CSS, GSAP, Framer Motion, ScrollTrigger, and Lottie exports.

Set up keyframes on a layer exactly as you want them, then scroll to the My Presets section at the bottom of the sidebar. Type a name in the input field and click Save. Your preset appears in the list and can be applied to any layer with one click — just like the built-in motion presets. Custom presets are stored in IndexedDB and persist between sessions reliably. To delete a preset, click the x button next to it.

Use the Draw On preset from the Draw category. It sets stroke-dasharray to 1000 at frame 0 with stroke-dashoffset equal to 1000, then animates stroke-dashoffset to 0 by frame 100 — which draws the stroke progressively along the path. For best results, apply this to path or line elements that already have a stroke attribute. Adjust the dasharray value to match your actual path length for a perfect draw.

Yes. SVG parsing, layer extraction, keyframe calculation, preview rendering, and all export formats are processed entirely in your browser using the DOMParser and XMLSerializer APIs. No file content, layer data, or export output is ever sent to a server. It is safe to use with unreleased logos, NDA-protected brand assets, and client illustrations.

SVGs with named groups and elements work best — typically files exported from Figma, Illustrator, or Inkscape with layer names preserved as id attributes. The tool extracts every g, path, circle, rect, ellipse, line, polyline, polygon, and text element as a separate animatable layer. Simple illustrations with a handful of distinct sections (like a rocket with moon, stars, trail, body, and flame) are ideal. Very complex SVGs with hundreds of nested micro-paths still work but may produce a large layers list.

Yes — treat your Gist URL as a secret. GitHub "private" Gists are not encrypted — they are unlisted links. Anyone who has your Gist URL or Gist ID can access your full animation project library without needing a GitHub login. Never share your Gist URL, Gist ID, or Personal Access Token with anyone. For maximum privacy, skip Gist sync and use Export JSON to back up and transfer projects manually instead.