This content originally appeared on Bits and Pieces - Medium and was authored by Kyle Le
Introduction
A cursor in a web page is very important and always does it job. But have you ever tried to create an animation for it ? As a gaming enthusiast, I love animations effects, so I tried to add some animation with Framer Motion
Framer Motion is a production-ready motion library for React. It is simple yet powerful, allowing you to express complex user interactions with robust, semantic markup. I wrote some tutorials on how to create animations with it, you can check those out:
Set up
We need React and Framer Motion, of course, so let’s create a simple React app and install Framer Motion with
yarn add framer-motion
Then we need an utility to track the mouse’s position, although you can write a custom hook yourself with plain JavaScript, but in this tutorial I will use a third-party library for it:
yarn add @react-hook/mouse-position
Create the animation
There are 2 animations I want to create in this example :
- When changing mouse position, there will be a trailing animation with spring
- When hover on elements, the cursor will have a spring animation
For the first animation to work, we need to track the mouse position like I mentioned before:
With this piece of code, we are now able to track the mouse position, now we only have to put the styling and mouse position in a div that has motion supports:
This element is now our new cursor, and looks like this
A small dot that follows our cursor everywhere, pretty cool right.
Okay, next animation is when we hover on specific elements, we will have different animation based on the element.
Variants
The great thing about Framer Motion that it supports variants for a motion. Basically, our cursor will have multiple variants
As you can see, beside the default, I have 2 more variants, the buy and sell . Next thing we want to do is apply those variants when events come in:
Don’t forget to put the variants to our motion component ! The result will look like this:
Sorry for the GIF quality but it couldn’t reach 60fps.
You should try the demo: https://cursor-animation-framer.vercel.app/
And if the article didn’t show you enough details, check out my source code
Thanks for reading!
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- The Bit Blog
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Create Cursor Animation in React with Framer Motion was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Kyle Le
Kyle Le | Sciencx (2022-11-02T14:28:21+00:00) Create Cursor Animation in React with Framer Motion. Retrieved from https://www.scien.cx/2022/11/02/create-cursor-animation-in-react-with-framer-motion/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.