Animation Editor

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

Timeline 0.00s / 1.00s

25%

50%

75%

100%

Focus the timeline: ←/→ scrub 1/30s (Shift 0.1s), Home/End, Space play, , / . previous/next keyframe. Ctrl/Cmd+C/V/D copy, paste, duplicate keyframes.

Durationms

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 or any animation engine, or as CSS @keyframes (apply the .ggc-anim class).