Animate a design — entrance motion, WebM/GIF export, and the live animated site block
Design Studio has an Animate tab — the fourth tab in the right sidebar, next to the design tools. It gives every object on the canvas a per-element entrance animation, and lets you export the result as a video or drop a live animated version straight onto a public site. (Design Studio is a members-only Builder surface — an org admin enables the Websites module.)
Applying an animation:
1. Select any object (text, image, shape).
2. Open the Animate tab and pick a preset from the grid. Presets: None, Fade, Slide up, Slide down, Slide left, Slide right, Zoom, Pop, and Spin.
3. Tune it with the Duration and Delay sliders, and pick an easing curve (linear, ease-out, or ease-in-out). Stagger delays across objects to choreograph the whole page.
4. Click Preview to play just that object, or "Apply to all" to give every object on the page the same preset.
5. Click "Play page" to watch the full sequence.
How it's stored:
Each object carries its animation as a property on the object itself, so it travels everywhere the design goes — history/undo, autosave, templates, page switches, and the PDF export all preserve it. Playback is purely a preview: Turtini snapshots your authored layout, runs the motion, then hard-restores the exact authored state, so animating never disturbs the real positions of your elements.
Exporting:
The Export panel adds two motion formats next to PNG / JPG / SVG / PDF:
• WebM — records the page animation to a video file at 30fps using your browser's recorder. (WebM recording isn't available in Safari; use Chrome or Edge, or export a GIF instead.)
• GIF — renders the animation frame-by-frame to an animated GIF at 15fps. GIFs are limited to 256 colors, so gradients and photos look slightly posterized — perfect for emails, chat, and anywhere video won't embed.
Put a live animation on a site:
On a Builder site, add the "Animated design" block. It snapshots the current design's first page into the block, then re-plays the animation live for every visitor — no video file, just the real vector design animating in the browser. You choose the trigger:
• On scroll — the animation plays when the block scrolls into view (replays each time it re-enters).
• On load — it plays immediately when the page opens.
The block scales to fit your column width and loops with a short pause between cycles.
When to use which:
• Animated block — for motion on your own Turtini site, crisp at any size.
• WebM — for high-quality video you'll upload elsewhere (social, YouTube, a landing page hero).
• GIF — for places that won't play video: email campaigns, chat messages, README-style embeds.