This will allow us to reference each box, and to start the animation when it comes into screen view and when it leaves screen view. Then, update the animate prop to the controls variable. First, we need to set the reference to each box component. import, ) įinally, we will update the props on our motion.div component. We will first import motion from the framer motion library. The first step will be to get the animation working on all boxes when the component mounts on page load.
npm install framer-motion react-intersection-observer Let’s install these two packages by running the following command. To achieve this, we will be using framer motion to add the animation, and a package called react intersection observer to keep track of when the element comes into view. In our example, we want to animate the red squares when they come into view on our screen. I won’t be going too in-depth into framer motion, as this article will just focus on getting the animation to start when the element comes into screen view. I am always keen to see other solutions.īefore we get started, I’ll assume you have knowledge of React and have some experience using framer motion or another animation library. If you know another way to achieve this functionality, please let me know. I hope it will be helpful for someone in the future who comes across the same issue. It helped me to achieve the functionality I was looking for, and I wanted to share the solution here. That’s when I asked my best friend, Google, and I found this thread on Stack Overflow. I checked the documentation, but I couldn't find the exact solution I was looking for. I needed to find a way to have the animation start when the element comes into the screen view.
Doesn’t sound like a big deal, right? However, since the element was lower on the page, the animation was happening before I scroll down to see it. One example of such an object is a light (In 3D graphics, lights function. The problem was that the animation was happening when the component mounts upon page load. In animation and filmmaking, a key frame (or keyframe) is a drawing or shot that defines the. While building a web page the other day, I wanted to add an animation to an element, but I was having some trouble with the timing of it.