A Framer JS module for creating custom SVG shapes and animating each point individually.
Framer Path is a module for Framer JS that allows users to create custom SVG shapes and animate each point individually. It solves the problem of building dynamic, animated vector graphics within Framer prototypes, enabling complex visualizations and interactive elements without external tools.
Designers and developers using Framer JS to create interactive prototypes, data visualizations, animated icons, or custom shape‑based animations.
It provides a straightforward API for fine‑grained control over SVG points and their animations, integrating seamlessly with Framer's layer system and offering unique animation modes for flexible, real‑time updates.
Create custom svg shapes and animate each point individually in Framer JS.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows animating individual SVG points with multiple states or dynamic functions, enabling precise, programmatic shape transitions as shown in the graph and blend shape examples.
Extends Framer's layer class, so all standard layer properties and events work, making it easy to incorporate into existing Framer prototypes without compatibility issues.
Supports generating point arrays with quick math expressions, facilitating the creation of complex, algorithmically-defined shapes for data visualizations or custom graphics.
Offers both 'states' and 'animation' modes, providing options for predefined animations or real-time updates, as demonstrated with the interval-based example.
Only supports straight, quadratic, and cubic bezier points, missing other SVG path commands like elliptical arcs, which restricts the types of shapes that can be created.
Requires manual download of a CoffeeScript file and integration into Framer projects, which is less convenient than modern npm-based package management and may involve compatibility issues.
The 'animation' mode does not work with states arrays, and there are specific rules such as paths must start with a simple point, limiting flexibility in certain animation scenarios.