Head over to RoutePlanGo - Road Trip Planner landing page and scroll down. As the page scrolls down, you will see screenshots of RoutePlanGo nicely showing up and grabbing the user’s attention. Wonder how you can do that in your app? Use Intersection Observer.
Prior to intersection observer, such effects were done using scroll event listeners and constantly comparing elements position with one another. This approach is ineffective and will slow down your app, as this has to be done in the Main thread.
Enter Intersection Observer - which offers a better and asycnhronous way to observe intersection of elements. As soon as the observer detects an intersection, your callback will be called. No need to constantly bugging the DOM for the position changes.
To use an Intersection,
- You need to create an observer first.
- Then assign a list of elements to be observed to this observer and passing a callback.
Example using an Intersection Observer in an React component
Let’s take a practical example, such as RoutePlanGo. In the landing page I have some screenshots of the application which are under the fold. As the user scrolls down the page, I want these screenshots to have some sort of animation and grab the user’s attention.
In my case, RoutePlanGo is built using React so the landing page is a React Component. Here’s the sample code for this setup.
You can see this code in action over here. That’s all needed for this simple and effective technique.