Animation Editor

Create keyframe animations with custom easing. Preview in real-time and export as JSON.

Animation preview
Timeline
ms
Keyframes
0%easex:0 y:0 r:0
100%easex:100 y:0 r:45
Select a keyframe

Click a keyframe dot on the timeline to edit its properties.

Easing

Select a keyframe to edit its easing.

How to use: Click the timeline to add keyframes. Select a keyframe to edit its properties and easing. Drag keyframe dots to reposition them. Use the playback controls to preview. Export your animation as JSON for use with GSAP, CSS animations, or any animation engine.
Built: 4/8/2026, 12:01:11 PM