Animation Events

Animation events let you trigger side effects — like toggling a class, dispatching a custom event, or calling a function — at specific points in your animation timeline.

Adding an event

Click the bolt icon next to an element in the Elements panel. An event marker appears on the timeline at the current playhead position.

Configuring events

Click an event marker to open the configuration popover. Each event has:

Type

Class Toggle — add, remove, or toggle a CSS class on the element
Custom Event — dispatch a CustomEvent on the element
Callback — call a named function, passing the element as an argument

Timing

Timeout — uses setTimeout based on the animation duration. Simple and lightweight, but timing is fixed at creation and won’t stay in sync if the animation pauses, loops, or uses alternate direction.
Polling — uses requestAnimationFrame to track actual animation progress via the Web Animations API. Accurate with any playback mode, but uses more CPU while the animation runs.

A warning icon next to the timing dropdown explains the tradeoffs on hover.

Multiple events at one position

You can add multiple events at the same timeline position. Click Add another in the popover to create additional events at that point.

Events in exported code

Events are exported as JavaScript alongside your CSS. The generated code depends on the timing mode:

Timeout events produce setTimeout calls
Polling events produce a requestAnimationFrame loop that reads getComputedTiming().progress

If you mix both timing modes, the export includes both patterns plus a combined cleanup function.