Using AOS (animate on scroll) inside a div with overflow

Question

I'd really like some things to animate onto screen when I scroll down to them, as they do here...

https://michalsnik.github.io/aos/

The problem is my site is actually nested inside a div called 'main-content' with seperate divs for the side bar and top bar.

It would appear from this question and answer that its not possible to achieve what I want inside a nested scroller, but this was 3 years ago and I'm just wondering if there is a potential workaround using aos or wow.js or something similar.

I've tried a couple and had no luck but I feel like there must be a way to achieve this.

Thanks in advance!

Answer 1

IntersectionObserver makes this kid of behavior easy to implement yourself using vanilla JavaScript. It's a fairly new API but there's a polyfill.

If you wanted to track your own scroll container instead of the document you can set the root to something else.

// Find the item we want to animate on scroll
var target = document.querySelector('#target');
var targetActiveClass = 'target-is-active';

// Call this function when it enters/leaves the viewport
var callback = function(entries, observer) { 
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add(targetActiveClass);
    } else {
      entry.target.classList.remove(targetActiveClass);
    }
  });
};

// Create our observer
var observer = new IntersectionObserver(callback, {threshold: 0});
observer.observe(target);

/* Our target, hidden by default */

#target {
  align-items: center;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  height: 100px;
  margin-bottom: 150vh;
  margin-top: 150vh;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity .25s ease-in-out,
              transform .25s ease-in-out;
  width: 200px;
}

/* Apply this class when #target enters/leaves the viewport */

#target.target-is-active {
  opacity: 1;
  transform: none;
}

<p>Scroll!</p>
<div id="target">Howdy!</div>