On-Scroll Reveal Animation with React & Framer Motion
Scroll animations are a great way to add interactivity and visual appeal to your website. In this article, we will explore how to create on-scroll reveal animations using the React library and the Framer Motion animation library.
Getting Started
First, make sure you have installed React in your project. If you haven’t already, you can do so by running the following command in your terminal:
npm install react
Next, install the Framer Motion library by running the following command:
npm install framer-motion
Creating the Animation
Now that we have our tools set up, let’s create a simple on-scroll reveal animation. We’ll start by creating a new React component for the element we want to animate. In this example, let’s say we want to animate a heading on our website.
import React from 'react';
import { motion } from 'framer-motion';
const MyComponent = () => {
return (
Hello, World!
);
}
export default MyComponent;
In this example, we are using the motion component from Framer Motion to create the animation. We are setting the initial and animate properties to define the starting and ending states of the animation. We are also setting a transition property to define the duration of the animation.
Adding Scroll Behavior
Now that we have our animation set up, let’s add the scroll behavior so that the animation is triggered when the user scrolls to a certain point on the page. We can achieve this by using the useInView hook from the react-intersection-observer library.
import React from 'react';
import { useInView } from 'react-intersection-observer';
import { motion } from 'framer-motion';
const MyComponent = () => {
const [ref, inView] = useInView({
triggerOnce: true,
rootMargin: '-100px 0px',
});
return (
Hello, World!
);
}
export default MyComponent;
In this code, we are using the useInView hook to track when the component comes into view. We then use the inView variable to conditionally animate the element based on its visibility.
Conclusion
By combining the power of React and Framer Motion, we can create stunning on-scroll reveal animations for our web applications. These animations not only enhance the user experience but also add a touch of elegance to our designs. Give it a try in your next project, and impress your users with captivating scroll animations.
Amazing! thank you Tom!!
Great video, I wonder how you caught up with such an astonishing design
Very good Video and well explained, thank you so much for your Effor. Cant wait for other Videos!
thanks for sharing, save me hours
This product supports purchasing power parity. Because you're located in Algeria, the price has been discounted by 60% to $6.
Thanks Tom! Well explained.
How did you import Reveal into your file?
Thank you very much sir!!
You explained this really clearly, thank you! Teaching seemed to come naturally.
You're awesome dude, I appreciate the straightforward content. No bs.
You are awesome. Your website is extraordinary usefull
You talk too fast. Have it in mind that you're teaching beginners too
More advanced tutorials on Framer Motion please!
It's no longer free
How can I do the same for animating text color while scolling back and forth
Hi Tom! I'm finishing my portfolio adding some animations thanks to your tutorials. Thank you so much! I'm very anxious to show it to you very soon. Here is something I couldn't found out and wanted to ask:
1) This is not a question, but I founded I could do the same with " whileInView='visible'. Meaby this function wasn't eable when you made your video.
2) Even though, a want to do this: when the element gets out from the viewport because I scrolled down, I want it to stay animated (that would be "once: true"). But when I come back to the top of my page I want to reset the animations (that would be "once: false") so the elements animate again. I am adding a "isOnce" state, then a useEffect whith a window.addEventListener and saying: setIsOnce (window.scrollY > elementRectTop). But is not working (not with "whileInView" and not with "animate:{mainControls}". Can you give me your opinion? Thank you again!
very rushed content, you are just talking to yourself and not explaining…..
Hi there Tom! How can I get the code of your project as you have mentioned its available for free? Please let me know!
Bro, thank you!
thank you very much ♥♥♥