Magnetic Hover Component for Framer

Copy component

Magnetic Hover Component for Framer

Copy component

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

Magnetic Hover Component for Framer

This is a customizable magnetic hover component for Framer, recreated from Lumalabs's website. It adds a magnetic touch interaction to your elements — as you hover, the element smoothly pulls toward the cursor, creating a subtle magnetic effect.

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

Created by

Decorative store banner with icons and blue text pill design
Decorative store banner with icons and blue text pill design
Decorative store banner with icons and blue text pill design
Magnetic hover effect on a media control button with a cursor interaction

Related Lesson

Creating a Useless Magnetic Hover Effect For a Website

Magnetic hover effect on a media control button with a cursor interaction

Related Lesson

Creating a Useless Magnetic Hover Effect For a Website

Magnetic hover effect on a media control button with a cursor interaction

Related Lesson

Creating a Useless Magnetic Hover Effect For a Website

About the resource

The component works by placing it within the frame you want to apply the effect to. Yes... it's that simple.

It has a bunch of property controls on the right panel that you can tweak to customize the effect. For example, the "Hover Area" defines how far outside of the element the hover effect starts, and the "Distance" defines how far the layer can be pulled.

To recreate the exact same effect from the Lumalabs site, I also added the "Children" property which—when added—creates something like a parallax movement effect between the main elements and their children when hovering over.

About the resource

The component works by placing it within the frame you want to apply the effect to. Yes... it's that simple.

It has a bunch of property controls on the right panel that you can tweak to customize the effect. For example, the "Hover Area" defines how far outside of the element the hover effect starts, and the "Distance" defines how far the layer can be pulled.

To recreate the exact same effect from the Lumalabs site, I also added the "Children" property which—when added—creates something like a parallax movement effect between the main elements and their children when hovering over.

About the resource

The component works by placing it within the frame you want to apply the effect to. Yes... it's that simple.

It has a bunch of property controls on the right panel that you can tweak to customize the effect. For example, the "Hover Area" defines how far outside of the element the hover effect starts, and the "Distance" defines how far the layer can be pulled.

To recreate the exact same effect from the Lumalabs site, I also added the "Children" property which—when added—creates something like a parallax movement effect between the main elements and their children when hovering over.

Framer magnetic hover settings panel with distance and area controls

The property controls of the Magnetic Hover component.

Framer magnetic hover settings panel with distance and area controls

The property controls of the Magnetic Hover component.

Framer magnetic hover settings panel with distance and area controls

The property controls of the Magnetic Hover component.

Framer Navigator

Learn the fundamentals of Framer for free.

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

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.

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.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

    Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

    Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

  • Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component