In Net magazine‘s October 2018 print issue (available now) FINE senior front-end developer Emmanuel Garcia walks through the process of using the IntersectionObserver API to execute on-scroll animations and transitions.
In the article he explains that the IntersectionObserver API is a promising and exciting new web API that tackles one of the most common issues for web developers: detecting the visibility of elements when they come into view. The API helps simplify the problem by providing a more modern solution for detecting element intersections. IntersectionObserver has many use cases for implementing deferred functionality, including lazy loading images, as well as triggering animations and transitions.
In the tutorial he details how to set up and configure an IntersectionObserver to observe multiple elements at once, as well as watch the callbacks to trigger some nifty animations once elements intersect with the viewport.
Grab a copy of the issue to learn more. All the files you need for this tutorial can be found here.