UI Basics

Editing values

Most numeric inputs in Sequotion (duration, playhead position, keyframe values, etc.) use a drag-to-edit pattern:

1. Drag left or right on the value to adjust it incrementally
2. Click the value to enter edit mode and type a precise number
3. Press Enter to confirm, or Escape to cancel

This pattern applies to the Duration and Playhead inputs in the transport bar, keyframe position inputs, and all property value fields.

Keyboard shortcuts

Shortcut	Action
Space	Play / Pause
Ctrl+Z	Undo
Ctrl+Shift+Z	Redo
Ctrl+Y	Redo (alternate)
Ctrl+C	Copy selected keyframes
Ctrl+X	Cut selected keyframes
Ctrl+V	Paste keyframes
Delete	Delete selected keyframes, track, or element
Escape	Clear all selections

Shortcuts are disabled when typing in an input field or the code editor.

Delete follows a priority order: if keyframes are selected, they are deleted first. If no keyframes are selected but a track or element is selected, a confirmation dialog appears before deletion. Boundary keyframes (0% and 100%) cannot be deleted.

Code editor

The built-in code editor has three tabs:

• HTML — write your markup; elements with id attributes become animation targets
• CSS — write baseline styles for your elements
• Output — read-only view of the generated animation CSS (and JS when applicable)

The Format button (broom icon) prettifies the code in the active tab.

Undo and redo

Sequotion tracks up to 100 undo states. Most actions that modify your animation (adding/removing tracks, editing keyframes, changing config) create an undo checkpoint. Continuous interactions like dragging inputs, color pickers, and sliders create a single undo entry when you release, not one per intermediate value.

Shortcut	Action
Ctrl+Z	Undo
Ctrl+Shift+Z or Ctrl+Y	Redo

You can also use the Undo and Redo buttons in the toolbar.

Data persistence

Your animation is automatically saved to your browser’s localStorage as you work. Changes are saved after a short delay (about 1 second) and are also flushed when you leave the page. This means:

• Your work persists across page reloads and browser restarts
• No account or login is required
• Data is stored locally in your browser — it is not synced to a server or across devices

To start fresh, use the Reset button in the timeline header. This clears all elements, tracks, and configuration and loads the Sequotion Intro preset.

Note

Clearing your browser data or localStorage will also remove your saved animation. Since data is stored per-browser, switching to a different browser or device means starting from scratch — export your animation first if you need to move it.