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>

Removing elements

If you remove the id from an element in the HTML (or delete the element entirely), its tracks will become stale — indicated by a link icon in the Elements panel. You can restore them by re-adding the element, or delete the stale tracks.