Resources

Elastic Line Component for Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Elastic Line Component for Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to make your first $1,000 with Framer

Free training

How to make your first $1,000 with Framer

Free training

Component

Elastic Line Component for Framer

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.

image of Nandi Muzsik
Image of Daniel
image of Isaac Roberts
image of Prianca S.

Created by

Nandi

,

Daniel

,

Isaac

,

and

Prianca

Graphic featuring an 'Elastic Line' component for Framer, demonstrating interactive design with a dynamic blue line and cursor for playful user interactions

About the resource

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.

About the resource

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.

About the resource

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.

Settings panel for the Elastic Line component in Framer, displaying options for direction, style, colors, width, distance, and transition type

The elastic line component properties in Framer.

Settings panel for the Elastic Line component in Framer, displaying options for direction, style, colors, width, distance, and transition type

The elastic line component properties in Framer.

Settings panel for the Elastic Line component in Framer, displaying options for direction, style, colors, width, distance, and transition type

The elastic line component properties in Framer.

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

More resources

More resources

View all

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

  • Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component

    Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component