Preset Library

The Preset Library provides ready-made animations that you can load and customize. Access it from the Library tab in the Properties panel (top-right). Hover over a preset card to see an animated preview.

Using a preset

Click any preset card to load it. This replaces your current HTML, CSS, tracks, keyframes, and animation config with the preset’s content. The animation auto-plays so you can see the result immediately.

Available presets

Entrance animations

Preset	Description	Duration	Properties
Fade In	Opacity fade from invisible to visible	800ms	opacity
Slide In Left	Slides in from the left with a fade	600ms	opacity, translate
Scale Up	Scales up from small with a bounce feel	500ms	opacity, scale
Bounce	Elastic bounce entrance from above	900ms	translate

These use fill-mode: both, so the element retains its final state. They load with infinite looping enabled for preview — adjust the iteration count in the transport bar for one-shot playback.

Looping animations

Preset	Description	Duration	Properties
Spin	Continuous 360-degree rotation	1000ms	rotate
Pulse	Gentle pulsing scale effect	1200ms	scale
Loading Spinner	Classic border-arc loading spinner	800ms	rotate
Color Cycle	Cycles through rainbow colors via filter hue-rotate	2000ms	filter (hue-rotate, saturate)

These loop infinitely. Pulse uses alternate direction; the others use normal.

Multi-element

Preset	Description	Duration	Properties
Sequotion Intro	Title slides in, tagline fades and unblurs	2000ms	opacity, translate, filter

This preset demonstrates animating multiple elements with coordinated timing.

Customizing a preset

After loading a preset, treat it as a starting point. You can:

Add or remove property tracks
Adjust keyframe values, positions, and easing curves
Change the animation config (duration, direction, iterations, etc.)
Edit the HTML and CSS to fit your design