New
New
New
Guide
- Effects
- Cursor
Guide
- Effects
- Cursor
Guide
- Effects
- Cursor
How to Make Any Element Follow Your Cursor in Framer
Learn how to make any element follow your cursor in Framer. I’ll reveal a secret component to make the process super easy, plus a cool example of this method.
Posted by
Nandi
Table of contents
How to do it
The follow cursor component is the easiest way to get started. It allows any element to smoothly track the cursor’s movement with built-in customization options.
How to do it
The follow cursor component is the easiest way to get started. It allows any element to smoothly track the cursor’s movement with built-in customization options.
How to do it
The follow cursor component is the easiest way to get started. It allows any element to smoothly track the cursor’s movement with built-in customization options.
Follow cursor component for Framer.
Follow cursor component for Framer.
Follow cursor component for Framer.
How to use it:
Drop the component into your Framer project.
Place it inside any element you want to follow the cursor
Customize the movement settings in the right panel:
Smoothing: Controls how fluidly the element follows.
Alignment: Adjusts how the element positions itself relative to the cursor.
Transition: Modifies opacity changes when enabling/disabling the effect.
How to use it:
Drop the component into your Framer project.
Place it inside any element you want to follow the cursor
Customize the movement settings in the right panel:
Smoothing: Controls how fluidly the element follows.
Alignment: Adjusts how the element positions itself relative to the cursor.
Transition: Modifies opacity changes when enabling/disabling the effect.
How to use it:
Drop the component into your Framer project.
Place it inside any element you want to follow the cursor
Customize the movement settings in the right panel:
Smoothing: Controls how fluidly the element follows.
Alignment: Adjusts how the element positions itself relative to the cursor.
Transition: Modifies opacity changes when enabling/disabling the effect.
The follow cursor component properties in Framer.
The follow cursor component properties in Framer.
The follow cursor component properties in Framer.
Creating an interactive light effect
Here’s a cool example to show it can be used for any element to create various effects. The holographic 3D cards resource shows how this effect can be combined with gradient movement and parallax floating for stunning visuals.
Creating an interactive light effect
Here’s a cool example to show it can be used for any element to create various effects. The holographic 3D cards resource shows how this effect can be combined with gradient movement and parallax floating for stunning visuals.
Creating an interactive light effect
Here’s a cool example to show it can be used for any element to create various effects. The holographic 3D cards resource shows how this effect can be combined with gradient movement and parallax floating for stunning visuals.
Holographic 3D card.
Holographic 3D card.
Holographic 3D card.
How it works
So basically you layer 5 elements on top of each other (images and gradients), all with different opacity values and blending modes. If done correctly, you get the holographic effect.
How it works
So basically you layer 5 elements on top of each other (images and gradients), all with different opacity values and blending modes. If done correctly, you get the holographic effect.
How it works
So basically you layer 5 elements on top of each other (images and gradients), all with different opacity values and blending modes. If done correctly, you get the holographic effect.
All the neccessary elements laid out.
All the neccessary elements laid out.
All the neccessary elements laid out.
All we need is a way to move all the gradient layers on hover. Now we apply the parallax floating component. This makes them move dynamically with the cursor.
All we need is a way to move all the gradient layers on hover. Now we apply the parallax floating component. This makes them move dynamically with the cursor.
All we need is a way to move all the gradient layers on hover. Now we apply the parallax floating component. This makes them move dynamically with the cursor.
The parallax floating component within elements that we want to move.
The parallax floating component within elements that we want to move.
The parallax floating component within elements that we want to move.
Wrapping up
With these techniques, you can make any element follow the cursor in Framer. Whether you want subtle motion or eye-catching interactivity, Framer makes it super easy to implement. Try it out and take your website to another level.
Wrapping up
With these techniques, you can make any element follow the cursor in Framer. Whether you want subtle motion or eye-catching interactivity, Framer makes it super easy to implement. Try it out and take your website to another level.
Wrapping up
With these techniques, you can make any element follow the cursor in Framer. Whether you want subtle motion or eye-catching interactivity, Framer makes it super easy to implement. Try it out and take your website to another level.
