Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

data-aos not working in second+ full height div

See original GitHub issue

This is: Possible Bug?

Specifications

AOS version: 2.3.1
OS: Windows 10
Browser: Firefox, Chrome

Expected Behavior

“Div 1” takes up the entire screen (width & height). There are 3 sections in this div that animate. “Div 2” takes up the entire screen, and is placed below Div 1. There are 3 seconds in this div that animate.

Actual Behavior

Everything in “Div1” animates properly. Scroll down to “Div2” -> any section with “data-aos” is invisible. The content won’t show up at all. If I hide Div1, then Div2 works (since it’s the only thing on the page), and visa versa.

Possible Issue

The problem seems to be with scrolling. Maybe the content in Div2, Div3, Div4, etc… isn’t showing up, because somehow AOS isn’t recognizing that the website is being scrolled to this section. So the content is invisible.

Before you ask:

Yes, AOS.init() is fine. As stated, the animations are working. They’re just not working in multiple full-screen divs. I have also read through/tried multiple issues, and haven’tt found a solution And window.addEventListener('load', AOS.refresh) is added at the very bottom of my footer file

Issue Analytics

State:
Created 5 years ago
Comments:7

Top GitHub Comments

1reaction

nepp95commented, Dec 9, 2019

SOLVED: After digging through some older threads, I realized the problem was in my main CSS file.

I have BODY, HTML ( overflow-x: hidden; }

This is a little bit of a problem, since I really need to have overflow-x: hidden. Removing this means that AOS works properly, but also means that I can’t have some animations that fly in from the right side of the screen :\ That’s a bit of a bummer, but I’ll have to find a workaround

This fixed my problem. Overflow seems to mess with AOS.

1reaction

PixiiBombcommented, Mar 25, 2019

SOLVED: After digging through some older threads, I realized the problem was in my main CSS file.

I have BODY, HTML ( overflow-x: hidden; }

This is a little bit of a problem, since I really need to have overflow-x: hidden. Removing this means that AOS works properly, but also means that I can’t have some animations that fly in from the right side of the screen :\ That’s a bit of a bummer, but I’ll have to find a workaround

Top Results From Across the Web

CSS - AOS animate library - why is slide-in ... - Stack Overflow

Ive spend hours trying to figure it out, actually trying other libraries too, only to see that the problem with the width occurs...

AOS - animations - CodePen

Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....

Aos - JavaScripting.com

data -aos-anchor - element whose offset will be used to trigger animation instead of an actual one. Examples: <div data-aos="fade-up" data-aos-anchor ...

Animate a div on mouse scroll using AOS - GeeksforGeeks

Set animation using data-aos attribute : <div data-aos="fade-in"></div>. Example: Below is an example to demonstrate animation effect.

Hide Scrollbars During an Animation - CSS-Tricks

But the magic number isn't the only problem. Another problem is scrollbars. When we set max-height: 0; , we also need overflow: hidden; ......