Demo page

One thing I have been noticing while browsing websites is that a lot of them have animations that are triggered when they scroll into view. Some notable examples:

I was curious how they did that, so I tried to recreate the effect.

After looking around it seemed that the simplest way to approximate the effects seen in the examples is to use add an event handler to the onScroll event, which compares the top and bottom positions of the element with that of the document’s. In more recent browsers, the element dimensions were provided with the Element.getBoundingClientRect() function:

// Checks whether the element is in viewport
function isInViewport(element){
    var rect = element.getBoundingClientRect();
    
    return rect.top >= 0 
        && rect.bottom <= (window.innerHeight 
            || document.documentElement.clientHeight);
    // If we're also checking horizontally, append
    // && (rect.left >= 0 
    //    && (window.innerWidth 
    //        || document.documentElement.clientWidth))
}

And inside the event listener, use the above test and then add (e.g., element.classList.add('animate-elem')) and remove (e.g., element.classList.remove('animate-elem')) a class name which triggers show/hide css animation.

References: