Quick Start

This guide walks you through creating your first animation in Sequotion.

1. Add an element

In the HTML panel, add an element with an id attribute:

<div id="my-box" class="box"></div>

Add some basic styling in the CSS panel:

.box {
  width: 100px;
  height: 100px;
  background: #3b82f6;
  border-radius: 8px;
}

The element will appear in the Elements panel on the left.

2. Add a property track

Click the + button next to your element and choose a property to animate — for example, Opacity.

Two keyframes are created automatically at 0% and 100%.

3. Edit keyframes

• Click a keyframe diamond on the timeline to select it
• Change its value in the property panel (e.g., set the 0% keyframe to 0 and the 100% keyframe to 1)
• Adjust the easing curve using the easing editor

4. Preview

Press the Play button to see your animation in the preview panel.

5. Export

Open the Output panel to see the generated CSS. Copy it into your project:

@keyframes new-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#my-box {
  animation: new-animation 1000ms 1 normal both;
}

That’s it — you’ve created your first animation with Sequotion.