path.animator

path.
animator

Auto-play: Animate objects along an SVG path with time-based control.

VERIFIED ✦ FRAMER ✦ EXPERT ✦

Customizable Path:

Define animation path using SVG path data.


Easing Functions:

Select from linear, easeIn, easeOut, and easeInOut for smooth animations.


Looping Options:

Loop continuously or alternate back and forth.


Duration Control:

Adjust animation speed.


Visual Customizations:

Change size, shape, color, border and background image of the animated object.

Looking for the scroll-based path.animator ?

Check out this component.

Looking for the scroll-based path.animator?

Check out this component.