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>