Aos: Animation triggers only when resize the browser

[OhhConti]

This is:

• Bug

Specifications

• AOS version: 2.3.1
• OS: windows
• Browser: chrome

Expected Behavior

Animations should work fine

Actual Behavior

Animations are triggered only when I resize the browser

Steps to Reproduce the Problem

Detailed Description

Possible Solution

Does the bug depend on overflow property? How should I set overflow's value?
Does the bug may be caused by the material design lite library? (I'm using it --> https://getmdl.io/started/index.html)

[andyshokry]

Having this same issue.

[nadavtal]

me too

[pestbarn]

I had issues with this too. Solved it by calling AOS.refresh() as soon as user starts scrolling.

let scrollRef = 0;

window.addEventListener('scroll', function() {
  // increase value up to 10, then refresh AOS
  scrollRef <= 10 ? scrollRef++ : AOS.refresh();
});

Not exactly an ideal solution, but at least it seems to be working. I chose the value 10 arbitrarily, executing the refresh after only 1 was glitchy (if user was scrolling while page was loading, etc).

[MarioPerini]

more information about html structure would be nice. codepen as example with the issue.
if you dont provide informations to reproduce the issue we can only guess...

i think you scoll an element and not the body itself.
so probably related to #223

if so you can resolve the issue with a little bit of code:
https://github.com/michalsnik/aos/issues/223#issuecomment-420336772
strongly recommended to debounce this solution.

[Dan2D]

Playing off @pestbarn's comment, I was able to solve mine, by using AOS.refresh() after a small timeout to avoid adding any event listeners.
setTimeout(() => {AOS.refresh();}, 500);

Also just a side-note, my issue started after I added lazy loading to my images

[hello-myc]

I had issues with this too. Solved it by calling AOS.refresh() as soon as user starts scrolling.

let scrollRef = 0;

window.addEventListener('scroll', function() {
  // increase value up to 10, then refresh AOS
  scrollRef <= 10 ? scrollRef++ : AOS.refresh();
});

Not exactly an ideal solution, but at least it seems to be working. I chose the value 10 arbitrarily, executing the refresh after only 1 was glitchy (if user was scrolling while page was loading, etc).

Thank you very much, I got mine issue fixed with your method

[rajesh4295]

Finally solved this issue by calling refresh method inside scroll listener on parent container .
For angular, add below code in app.component.ts -> ngOnInit()

$(".parent-container").on('scroll', function () {
      AOS.refresh();
 });

[adampatterson]

Worke

I had issues with this too. Solved it by calling AOS.refresh() as soon as user starts scrolling.

let scrollRef = 0;

window.addEventListener('scroll', function() {
  // increase value up to 10, then refresh AOS
  scrollRef <= 10 ? scrollRef++ : AOS.refresh();
});

Not exactly an ideal solution, but at least it seems to be working. I chose the value 10 arbitrarily, executing the refresh after only 1 was glitchy (if user was scrolling while page was loading, etc).

Works, thanks so much!