SVG-based motion path editor with draggable waypoints, curviness control, and auto-rotate — animate elements along custom curves.
Click on the artboard to place waypoints that define a curved path. Each waypoint appears as a draggable handle overlaid on the canvas, connected by a smooth SVG Catmull-Rom spline. Drag waypoints to reshape the curve in real time — the layer follows the path as you scrub the timeline, giving instant visual feedback on the motion trajectory.
Adjust the curviness parameter to control how tightly the path follows the waypoints — low values create angular paths, high values create sweeping arcs. Enable auto-rotate so the layer rotates to face the direction of travel, perfect for animating icons, arrows, or character illustrations that need to orient along the curve.
Motion paths are powered by GSAP MotionPathPlugin, ensuring pixel-accurate rendering across all browsers. The path data is serialised into the banner HTML so animations work identically in the editor, in preview, and in the published ad tag. When a motion path is active, it replaces manual x/y keyframes — the timeline UI hides position tracks to avoid conflicts.
Published banners include the MotionPathPlugin CDN script automatically. The SVG path data is embedded as a JSON attribute so the animation runs independently with no server dependency. The exported HTML is self-contained and works on all major ad platforms that support GSAP animations.