Motion & Prototyping

Timeline Panel

Press Ctrl+Alt+T to toggle the Timeline Panel. This panel is your central hub for all animation work. It consists of:

• Playback Controls — Play, pause, stop, and loop buttons with time display
• Timeline Ruler — Time axis with configurable zoom and scrubber head for frame-by-frame navigation
• Track Rows — One track per animated property, showing keyframes as diamonds on the timeline

Keyframes and Animation Tracks

Animation in Varve is built on keyframes organized into tracks:

• Animation Track — A sequence of keyframes for a single property of a node (e.g., position, rotation, opacity)
• Keyframe — A snapshot of a property value at a specific point in time. Keyframes can be moved, added, and deleted on the timeline.
• Target reference — Each track references a target node and property path using dot notation (e.g., transform.x)

To create an animation:

1. Select a node on the canvas
2. In the Timeline Panel, click the "+" button to add a new track
3. Choose the property you want to animate (position, size, rotation, opacity, color, etc.)
4. Move the scrubber to a new time position
5. Change the property value on the canvas or in the Inspector — a keyframe is automatically created
6. Repeat to build up your animation

Interpolation

Varve interpolates between keyframes using a type-safe interpolation engine that handles:

• Numeric values — Linear interpolation for position, size, rotation, opacity
• Colors — Interpolation in Oklab color space for perceptually uniform color transitions
• Arrays and objects — Recursive interpolation for complex property types
• Affine transforms — Decomposed interpolation for smooth transforms
• Path morphing — Interpolation between path shapes for shape morphing animations

Each keyframe has an easing function that controls the acceleration curve between keyframes. Varve supports:

• CSS named easings (linear, ease, ease-in, ease-out, ease-in-out)
• Cubic bezier curves (custom easing via control points)
• Spring physics (mass-spring-damper model for natural motion)
• CSS steps() function for stepped animations

Smart Animate

Smart Animate automatically generates animations between different states of a node group. When the same node exists in two different frames with modified properties, Varve can animate the transition — interpolating position, size, rotation, color, and other animatable properties automatically.

Prototype Interactions

Varve's prototype system lets you define how screens connect and respond to user input:

Triggers

14 trigger types define what initiates an action:

• On Click / On Tap — Mouse click or touch tap
• On Hover — Mouse enter/exit
• On Drag — Drag gesture
• On Key Press — Keyboard input
• On Timer — Time-delayed trigger
• On Scroll — Scroll position change
• On Load — Screen load
• And more (gesture, voice, gamepad, variable change, state machine events)

Actions

13 action types define what happens when a trigger fires:

• Navigate — Go to another screen (with transition)
• Overlay — Show or hide an overlay
• Animate — Start a timeline animation
• Toggle Variable — Set a variable value
• Link — Open an external URL
• Sound — Play audio
• Video — Control video playback
• And more (set state, payload, custom events)

Screen Transitions

When navigating between screens, Varve supports six transition types:

• Dissolve — Cross-fade between screens
• Slide — Slide in from left, right, top, or bottom
• Push — Push the current screen off as the new one slides in
• Move In — New screen slides over the current
• Move Out — Current screen slides away to reveal the new screen below
• Instant — No transition (immediate switch)

Each transition has configurable duration and easing. For accessibility, Varve respects prefers-reduced-motion and clamps durations to meet WCAG timing requirements.

Presentation Mode

Press the Present button in the menubar or Status Bar to enter fullscreen presentation mode. In this mode:

• Navigate through prototype screens using click/tap or keyboard
• Device frame overlay shows phone, tablet, or desktop bezels
• Animations play in real time
• Press Escape to exit

Animation Export

Animations can be exported in three formats:

• CSS @keyframes — Standard CSS keyframe animation, compatible with any web project
• SVG animate — SMIL-based SVG animation embedded in SVG files
• Lottie JSON — Lottie format for use with Lottie-web, Lottie-iOS, and Lottie-Android

See Export & Code Generation for detailed export instructions.