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]

Worked

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!

[d8nieldonaldson]

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

I had the same issue, which I believe is also caused by lazy loading the images.
the setTimeout solution works, and as @Dan2D further mentioned, (I feel) it is the better solution as you don't have the expense of an eventListener.

[AashishSinghal]

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

I have a NextJs application, where do I put this code to make it work properly ?

[AashishSinghal]

let scrollRef = 0;

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

this did not work for me when I placed this code in my react nextjs app inside the _app.js file inside the React.useEffect function Please share how.

[MounirEl-Abbas]

If you are using React and encounter this problem, in my case, it is due to the fact that the website scrolling was happening in .App component and not the body tag. So what I did to fix it is the following:

App.js

import AOS from "aos";
import "aos/dist/aos.css";

useEffect(() => {
    AOS.init();

    //give <div className='App'> an id
    document.getElementById("app").addEventListener("scroll", () => {
    AOS.refresh();
    });
}, []);

[FrancescoDiCursi]

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

Super elegant and efficient, it worked for me! The transitions were buggy before browser resize, this fixed that.

[anasbehhari]

it will not work if the element your scrolling from not the body!! for example : you have an main TAG inside your HTML and it's the one you're scrolling from it won't work! only the body

[kbcruz6]

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

✅ You are the best, simple, directly to the point, works for me in React app! Thank you bro