Exporting

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

Output panel

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

The trigger mode dropdown at the top of the Output tab lets you switch between export modes. A Copy CSS button copies the CSS portion to your clipboard. When JavaScript is generated (for scroll triggers or animation events), a separate Copy JS button appears as well.

Trigger modes

Choose how your animation is triggered:

Mode	JS Required	Events Support	Browser Support
On Load	No	Yes	All
On Scroll (CSS)	No	No	Chrome/Edge 115+
On Scroll (JS)	Yes	Yes	All

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.

Caution

animation-timeline: view() has limited browser support. It works in Chrome and Edge 115+, but is not yet supported in Firefox or Safari. Check Can I Use for the latest compatibility info.

Caution

Animation events are not supported with this trigger mode since they require JavaScript.

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

Note

Tracks with no real animation (a single keyframe, or all keyframes with identical values) are automatically excluded from the export. If a property track doesn’t appear in the output, check that its keyframes have different values.

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.