Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Component
This is a recreation of the Elastic Line component for Framer, from Daniel's work. An elastic line interacts with the cursor using a spring effect, stretching and bending as you hover. Copy and paste it into your project to add a touch of personality to your website.
Adding the Elastic Line component to your project is straightforward—just drop it in and make it your own. You can set the "direction" to vertical or horizontal, pick between a solid or gradient "style," and adjust the "width" to match your design. The "distance" determines how far the line stretches before snapping back, while the "transition" lets you refine how smoothly it returns to its original position.
Adding the Elastic Line component to your project is straightforward—just drop it in and make it your own. You can set the "direction" to vertical or horizontal, pick between a solid or gradient "style," and adjust the "width" to match your design. The "distance" determines how far the line stretches before snapping back, while the "transition" lets you refine how smoothly it returns to its original position.
Adding the Elastic Line component to your project is straightforward—just drop it in and make it your own. You can set the "direction" to vertical or horizontal, pick between a solid or gradient "style," and adjust the "width" to match your design. The "distance" determines how far the line stretches before snapping back, while the "transition" lets you refine how smoothly it returns to its original position.
The elastic line component properties in Framer.
The elastic line component properties in Framer.
The elastic line component properties in Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
