The tides have turned: CSS fading is now possible thanks to CSS transitions. Web developers have been using fade ins and fade outs (basic opacity animation) on their website for years, but the effect needed to be accomplished using JavaScript because CSS didn't have the capability to complete animations. We finish off our code by attaching our DOM ref to the actual DOM - by passing it as the ref prop to our. We can further optimize this by only calling it once - so as to not re-hide stuff we've already seen. We update the isVisible state variable by calling its setter - the setVisible function - with the value of entry.isIntersecting. Since we're only calling it once, we can assume the list will only ever contain a single element. The callback we pass into our observer is called with a list of entry objects - one for each time the observer.observe method is called. (Thanks to Sung Kim for pointing this out to me in the comment section!) That's what we're doing at the end of our useEffect implementation - we return a function that calls the unobserve method of our observer. Then, we tell the observer instance to observe our DOM node with observer.observe(domRef.current).īefore we're done, however, we need to clean up a bit - we need to remove the intersection listener from our DOM node whenever we unmount it! Luckily, we can return a cleanup function from useEffect, which will do this for us. whenever you scroll, zoom or new stuff comes on screen). We pass in a callback function, which will be called every time any DOM element registered to this observer changes its "status" (i.e. The setup of the intersection observer might look a bit unfamiliar, but it's pretty simple once you understand what's going on.įirst, we create a new instance of the IntersectionObserver class. Create the intersection observer and starting to observe with useEffect.Create a reference to a DOM node with useRef.Create a state variable indicating whether the section is visible or not with useState.You can read more about each of these hooks in the documentation, but in our code we're doing the following: If you want to understand what's happening, I've written a step-by-step guide below, that explains what happens.įirst, we call three built in React Hooks - useState, useRef and useEffect. If you're looking for a copy and paste solution - here you go. Here's the code for implementing our component: And since we're using React, we can write a nice reusable component that we can re-use across our application. We're not digging too deep into the other cool stuff you can do with intersection observers in this article though, we're just implementing a nice "fade in on entry"-feature. It gives us some positional data, as well as nice-to-have properties like isIntersecting, which tell us whether something is visible or not. Quickly summarized, however, an intersection observer accepts a DOM node, and calls a callback function whenever it enters (or exits) the viewport. If you want to dig deep, I suggest you read this MDN article on the subject. The IntersectionObserver API is a really powerful tool for tracking whether something is on-screen, either in part or in full. Wouldn't it be nice if an event was triggered when your content was visible? We're going to use the IntersectionObserver DOM API to implement that behavior. Looks cool right? Now, how cool would it be if we had this effect whenever we scroll a new content block into the viewport? We're also transitioning the visibility property from hidden to visible. We also specify an initial opacity of 0.īy transitioning these two properties, we'll get the effect we're after. Here, we use the transform property to initially move our container down 1/5th of the viewport (or 20 viewport height units). Enter fullscreen mode Exit fullscreen mode
0 Comments
Leave a Reply. |