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

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

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

,

,

,

and

Graphic featuring an 'Elastic Line' component for Framer, demonstrating interactive design with a dynamic blue line and cursor for playful user interactions
Graphic featuring an 'Elastic Line' component for Framer, demonstrating interactive design with a dynamic blue line and cursor for playful user interactions
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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Horizontal ticker menu with Mojave selected and macOS names listed

    Ticker Menu in Framer

    Component

    Horizontal ticker menu with Mojave selected and macOS names listed

    Ticker Menu in Framer

    Component

    Horizontal ticker menu with Mojave selected and macOS names listed

    Ticker Menu in Framer

    Component

  • Framer drawing board component with sketching and collaboration tools

    Drawing Board Component for Framer

    Component

    Framer drawing board component with sketching and collaboration tools

    Drawing Board Component for Framer

    Component

    Framer drawing board component with sketching and collaboration tools

    Drawing Board Component for Framer

    Component