Animation Studio v2.0

Craft
Animations
That Live

Design, prototype, and export beautiful animations with an intuitive visual timeline and powerful easing curves.

Interactive Workspace

Manipulate animations in real-time with our visual editor. Adjust properties, preview changes, and fine-tune every frame.

Properties
Position
Scale 1.0
Rotation 0°
Opacity 100%
Border Radius 12px
Color
Easing
preview.canvas
00:00.000
00:02.000
Layers
Shape 1
Circle
Text Layer
Quick Presets
Timeline 2s @ 60fps
100%
Properties
Position
Scale
Rotation
Opacity
Radius
0:00
0:00.5
0:01
0:01.5
0:02

Easing Curves

Click any curve to see it in action. Each easing function creates a unique motion personality.

60fps
Smooth Rendering
∞
Keyframes
CSS / JS
Export Formats
animation.css
// Generated by MotionForge
@keyframes customAnimation {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
border-radius: 12px;
}
50% {
transform: scale(1.2) rotate(180deg);
opacity: 0.8;
border-radius: 50%;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 1;
border-radius: 12px;
}
}
.animated-element {
animation: customAnimation 2s ease infinite;
}