So you want to underline some text when some event happens. Either on hover or when it enters the viewport.
In the former case, it’s easy to do using plain CSS and the
(The above code is a modified version of a snippet found on 30secondsofcode.)
Nothing earth-shattering there. But what if we want to animate the underline when the element enters the viewport? That’s a job for the Intersection Observer API. In a nut, this API lets you listen for events that fire when elements intersect with an ancestor or the document itself. In this case, we want to listen for when our matching elements enter the viewport.
Intersection Observer to the Rescue
Since we’re not listening for hover events, it’s easist to change the animation selector to a second class, so let’s replace
.animate in the second selector:
underline and listen for when they enter the viewport:
First, we define a callback function
handleIntersect. This function will run whenever the observed element intersects with the ancestor element defined in the options object (the viewport, in this case).
Then, we initialize an
IntersectionObserver object for each of the page elements with the class
.underline, and pass it the
threshold parameters. In English, these options say, ‘run the callback function whenever this element enters the viewport and is 100% visible.’
Once the callback runs, it adds the
animate class to the element in quesiton, which starts to transition the