GSAP SVG Editor
Drag nodes to create animations
Quick Presets
Bounce Ball
Rotating Square
Pulse Effect
Wave Motion
Add Nodes
Shapes
Circle
Rectangle
Line
Polygon
Transform
Animation
Easing
Values
Output
Export Code
Clear All
100%
10 nodes ยท 9 connections
Circle
cx
cy
r
fill
stroke
Shape
Rectangle
x
y
width
fill
stroke
Shape
Position
Shape
X
Y
x
y
Animation
Scale
Shape
Scale
scale
scaleX
scaleY
Animation
Easing
Linear
Power1.in
Power1.out
Power1.inOut
Power2.in
Power2.out
Power2.inOut
Power3.in
Power3.out
Power3.inOut
Elastic.out
Elastic.in
Bounce.out
Bounce.in
Back.out
Back.in
Circ.out
Circ.in
Expo.out
Expo.in
Ease
Easing
Linear
Power1.in
Power1.out
Power1.inOut
Power2.in
Power2.out
Power2.inOut
Power3.in
Power3.out
Power3.inOut
Elastic.out
Elastic.in
Bounce.out
Bounce.in
Back.out
Back.in
Circ.out
Circ.in
Expo.out
Expo.in
Ease
Tween
Animation
Easing
Duration
Repeat
Yoyo
Tween
Tween
Animation
Easing
Duration
Repeat
Yoyo
Tween
Timeline
Tween 1
Tween 2
Tween 3
Timeline
Preview
Animation
Preview
2 shapes connected