Creating Custom Cursors - React and Framer Motion

Показать описание

Create custom cursor when hover text, build with react and framer motion

👨‍💻Code:

🔗Link:

Timestamps:
0:00 - Intro
00:07 - Demo
00:28 - Setup CRA
01:10 - Text
02:26 - Cursor
03:30 - Get Cursor Position
06:40 - Install and Use Framer Motion
13:37 - Done

👋🏻Contact Me:

🌎 Find Me Here:

#react #motion #enjoyCoding

Рекомендации по теме

Комментарии

thank you!! really broke down the solution in a way that was easy to follow and implement, you made my personal website look that much cooler

candyball

Whoever is placing the problem of lagging..🟥🟥🟥
Replace the variants part with this ✅, adding the transition smooth property:

const variants = {
default: {
x: mousePosition.x - 16,
y: mousePosition.y - 16,
transition: {
type: "smooth",
duration: 0,
},
},
text: {
height: 150,
width: 150,
x: mousePosition.x - 75,
y: mousePosition.y - 75,
backgroundColor: "yellow",
mixBlendMode: "difference",
transition: {
type: "smooth",
duration: 0,
},
},
};

A__ShreyashSantoshSahu

i can't believe it's that easy, , THANK YOU SO MUCH!!

-exe

Great video! I can't wait to implement this is my next project.

Skillthrive

The chickens in the background appreciating you for creating this video.

Its-InderjeetSinghGill

Thanks Man. The pointer-events: none saved my life.

ageconcepts

Hi, good tutorial but dont use pageX and pageY use clientX and clientY instead because using page when you scroll down your mouse cursor just desynchronized and looks really weird

ARediting

Great video. To the point and exactly to understand how this works.

MrFACTS-mkib

My cursor motion is delaying little bit can you help??

mgamingyoutube

Why is mine not moving smoothly? There's a bit of delay before the actual cursor follows the circle and it doesn't have the same speed as the actual cursor.

anthonyferrer

use ref and then use the built in ref.curret?.animate function. It's buttery smooth

PleizyParagas

This is really great!!! Gonna try this

rizqyhbb

this is the only video that works thanks

Kdartbe

Hello! I tried implementing it and it's working... But the response time seems very off. It's lagging VERY much! How to resolve it? and BTW thanks for the tutorial!

manansoni