Adding Elements

Sequotion discovers elements from the HTML you write in the editor. Any element with an id attribute becomes available as an animation target.

Creating a target

Add an element with an id in the HTML panel:

<div id="hero-title">Hello World</div>

It will automatically appear in the Elements panel on the left sidebar.

Styling your elements

Use the CSS panel to style your elements. These styles are applied in the preview and serve as the baseline for your animation:

#hero-title {
  font-size: 48px;
  color: white;
  opacity: 0;
  transform: translateY(20px);
}

Multiple elements

You can animate multiple elements independently. Each element gets its own set of property tracks and keyframes:

<h1 id="title">Title</h1>
<p id="subtitle">Subtitle</p>
<button id="cta">Get Started</button>

Element row controls

Each element in the Elements panel has a set of controls:

▶ Expand/collapse — toggle to show or hide the property tracks under this element
⚡ Bolt button — add an animation event at the current playhead position (see Animation Events)
+ button — open the Add Property dropdown to add a new property track
Drag handle — reorder property tracks within an element by dragging

Removing elements and stale tracks

If you remove the id from an element in the HTML (or delete the element entirely), its tracks will become stale. A track also becomes stale if its CSS property is removed or commented out in the CSS panel.

Stale tracks are indicated by a broken link icon on the track row and are dimmed in the Elements panel.

Stale Property Manager

The Stale Property Manager panel is opened from the button in the left panel header. It shows all stale tracks grouped by their target element.

For each stale track, you can:

Restore — re-adds the CSS property to the element’s styles
Delete — permanently removes the track and its keyframes

Bulk actions are available at the top: Restore All and Delete All.

Tracks that have no real animation (a single keyframe, or all keyframes with identical values) are automatically removed when detected as stale, to prevent clutter.

Track Visibility

The Track Visibility Manager is opened from the eye icon button in the left panel header. It lets you control which tracks and targets are visible in the preview and timeline.

Hide/Show toggles (eye icon) — per-track and per-target visibility controls
Solo mode (S button) — when any track or target is soloed, only soloed items are visible in the preview and timeline. All other items are temporarily hidden.
Show All — makes all tracks and targets visible
Hide Unanimated — hides tracks that have no meaningful animation
Hide All — hides all tracks and targets

Visibility and solo state persists across page reloads (saved in localStorage).