Exporting

Sequotion generates clean, dependency-free CSS and JS that you can drop into any project.

Output panel

Open the Output panel to see the generated code. The output updates in real time as you edit your animation.

Trigger modes

Choose how your animation is triggered:

On Load

The animation plays as soon as the page loads. This is the default — it generates a standard CSS animation rule.

On Scroll (CSS)

Uses the native CSS animation-timeline: view() property. No JavaScript required, but browser support is more limited.

On Scroll (JS)

Uses an IntersectionObserver to add an in-view class when the element enters the viewport, which triggers the animation. The animation starts paused and runs when the class is applied.

What gets exported

CSS

@keyframes rule with all your animated properties
Animation shorthand on each target selector
Per-keyframe animation-timing-function when easings differ between keyframes

JavaScript (when needed)

JS is generated when your animation uses:

Scroll trigger (JS mode) — IntersectionObserver code
Animation events — setTimeout or requestAnimationFrame code depending on timing mode

Using the exported code

Copy the CSS into your stylesheet and the JS into a script tag or module:

<link rel="stylesheet" href="styles.css">
<script src="animations.js"></script>

The generated code is vanilla CSS and JS with no dependencies.