Troubleshooting

My script tag isn’t working

Sequotion is an HTML and CSS animation editor — JavaScript is not executed in the preview. Any <script> tags in the HTML panel are ignored. Use the HTML panel for element structure and the CSS panel for styling. Sequotion generates all the JavaScript you need automatically in the Output tab when your animation requires it (e.g., scroll-triggered or event-driven animations).

My element doesn’t appear in the timeline

Elements need an id attribute to become animation targets. Make sure your HTML element has one:

<!-- Won't appear -->
<div class="hero">Hello</div>

<!-- Will appear -->
<div id="hero" class="hero">Hello</div>

Once added, the element will show up automatically in the Elements panel.

The Output tab is empty

The Output tab generates CSS from your property tracks and keyframes. If it’s empty, you likely haven’t added any property tracks yet, or your tracks don’t have keyframe values set.

1. Select an element in the Elements panel
2. Click the + button to add a property track (e.g., Opacity)
3. Set values on the start and end keyframes

The Output tab should now show a @keyframes rule and animation shorthand.

My animation events aren’t firing

Animation events require JavaScript — they won’t work with the On Scroll (CSS) trigger mode, which is CSS-only.

Switch to On Load or On Scroll (JS) in the Output tab’s trigger mode dropdown. Also make sure you’ve included both the generated CSS and JS in your page.

See Animation Events for details on timing modes.

The preview looks different from my actual site

The preview panel renders your animation in an isolated iframe. Differences are usually caused by:

• Missing styles — the preview only uses the CSS you write in the CSS panel. Your site may have resets, global styles, or frameworks that affect layout.
• Font differences — if your site loads custom fonts, the preview uses system fonts unless you add a font import in the HTML panel.
• Viewport size — the preview panel may be a different width than your site. Resize the panel or test at your target breakpoints.

Changing the unit changed my values

Switching a property’s unit (e.g., px to rem) replaces the unit without converting the numeric value. A value of 100px switched to rem becomes 100rem, not the equivalent in rems.

To change units correctly, switch the unit first, then manually adjust the number to the value you want.

See CSS Properties for more on units.

I lost my animation

Sequotion saves your work to your browser’s localStorage. Your animation can be lost if:

• You cleared your browser data (cache, cookies, site data)
• You switched browsers or devices — localStorage is per-browser
• You used private/incognito mode — data is cleared when the window closes

There is currently no server-side backup. To protect your work, use the Output tab to copy your generated CSS and JS regularly. You can also export and save the code to a file as a manual backup.

My position properties aren’t doing anything

Position sub-properties (top, right, bottom, left) require the element to have a CSS position value other than static. In the sub-property dropdown, use the position mode selector to set it to relative, absolute, fixed, or sticky. The sub-properties are disabled until you set a position mode.

See CSS Properties for details.

A track shows a broken link / stale icon

The track’s CSS property was removed or commented out, or the element’s id was changed or removed. Open the Stale Property Manager from the left panel header to restore or delete stale tracks.

See Adding Elements for details.

Backdrop filter isn’t visible

Backdrop filter applies to the area behind the element. The element itself needs a semi-transparent or transparent background for the effect to be visible. For example:

#my-element {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

See CSS Properties for details.