Built with Framer

Framer Component: path.animator

Natalia Patiño

Project Overview

The path.animator is a custom Framer component that animates elements along SVG paths with precise control over timing, easing, and looping behavior. This component makes it easy to bring motion into hero sections, icons, backgrounds, and more.

Features

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.
You can explore the component here: path.animator
Like this project
0

Posted Sep 21, 2024

A custom Framer component that animates elements along an SVG path with time-based control. Built to create fluid custom animations.

Framer Component: path.animator (scroll)
Framer Component: path.animator (scroll)
Vorld Website Design
Vorld Website Design
Freeletics Digital Product Design
Freeletics Digital Product Design
STÆDIUM Digital Product Design
STÆDIUM Digital Product Design