Web Animations Builder - Interactive Lab | IconVault
Build element.animate() keyframes visually with live preview, then copy or download the code. Free, in-browser.
Web Animations Builder
Visual element.animate() builder
Keyframes
Timing
Live preview
5 of 5 free plays left. Runs on the real Web Animations API.
Generated element.animate() code
const el = document.querySelector("#box");
el.animate(
[
{
"offset": 0,
"transform": "translate(0px, 0px) rotate(0deg) scale(1)",
"opacity": 1,
"background": "#6366f1"
},
{
"offset": 1,
"transform": "translate(160px, 0px) rotate(180deg) scale(1.2)",
"opacity": 0.85,
"background": "#ec4899"
}
],
{
duration: 1200,
easing: "ease-in-out",
iterations: Infinity,
direction: "alternate",
fill: "both",
},
);About this tool
IconVault's Web Animations Builder turns the Web Animations API into a visual editor. Add keyframes at any offset, dial in translate, rotate, scale, opacity and color per keyframe, tune duration, easing, iterations, direction and fill, then hit play and watch it run on a real element via `element.animate()`. The generated code is copy or download ready.
Everything is free and runs fully in your browser. Unlike CSS animations, WAAPI gives you playback control: play, pause, reverse and finish from JavaScript, plus promise-based `finished` handling, all visible in the exact code this lab generates.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon