Aos: AOS NOT Working

[Roganraj]

ANIMATE ON SCROLLING not working
If i open or close inspect element, that time only AOS effect working.

what is the soln for thi anyone help me

[thomasgrist]

I think the script may have stopped working in Chrome on Mac.

What worked perfectly for me has stopped working with no changes to code.

It still works in Safari.

[noonii]

Yup, latest library does not work. It's broken for Chrome.

I suggest just downloading an older version of it in the meantime.

[michalsnik]

Hey, can you guys put more light on what's not working, are there any errors in console?
I updated the following codepen to use the latest version of AOS:
https://codepen.io/michalsnik/pen/WxNdvq

And it works fine on Chrome 🤔

[molysama]

@michalsnik AOS can't show div when I add data by ajax.
It happened in v2.3 and v3.0-beta, works fine in v2.2

[jonathanmelville]

Yep I'm seeing this as well. 2.3 is completely broken for me. There are no console errors, it just doesn't work.

I am including it a webpack bundle. I'm seeing this across all browsers.

[michalsnik]

I created fresh project with https://parceljs.org and used [email protected] with exactly this code:

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

AOS.init()

And still everything works fine. I'm need your help guys. Can you please provide codepen/codesandbox/repository that reproduces the problem? That would be really helpful. I can't get it to stop working.. Once I get a broken example I will fix it.

[michalsnik]

Guys, please try [email protected] or aos@next. I fixed issue with MutationObserver in both of these versions :) If you'll still have some problems however, please reopen this issue and let me know! :)

[fundix]

no, 2.3.3 even 2.3(some)beta not working ... v2.2 works (Im using aos in vue application)

[suraj7777]

Not working for me as well.Using on angular.

[rille111]

Not working on Safari .. getting error

polyfill.js:3505TypeError: Attempting to configurable attribute of unconfigurable property.
aos.js:1
      aos: MutationObserver is not supported on this browser,
      code mutations observing has been disabled.
      You may have to call "refreshHard()" by yourself.

[HMR] Waiting for update signal from WDS...
ReferenceError: Can't find variable: Map

[jcjp]

Still experieced on Angular version 8 universal or server-side rendering.

[mikemckain]

Getting this right now on Vue in Chrome. Worked locally. Deployed and aos breaks unless I inspect.

[arpadgabor]

Hey @mikemckain , I'm getting the same problem in Nuxt.js. Works just fine in dev but no longer works after build. The css even shows up in the minified html. Did you manage to fix your problem? Worked in another project with Angular without any special configuration.

[slecorvaisier]

Same here with Nuxt.js, works fine until I deploy. Using aos@next

[MrSunshyne]

same here, with Nuxt.js works fine in dev. After npm run generate nothing shows up.
The classes are these. It seems nothing it triggering the element to become visible when they are in the viewport.

[MrSunshyne]

I also tried with the latest next branch. Same problem.

@michalsnik

[Amachado2433]

Getting this right now on Vue in Chrome. Worked locally. Deployed and aos breaks unless I inspect.

Hey @mikemckain and @arpadgabor Im having the same issue, were you able to get it working?

[MrSunshyne]

Should we open another issue for this bug? @michalsnik

[rsalunga29]

Same here with Nuxt.js, works fine until I deploy. Using aos@next

Having the same problem, is there a solution for this @michalsnik?

[hunterjenkins]

I'm also seeing this issue. Any advice on how to move forward would be great!

[aribudin]

hello all
try using this

$(function() { AOS.init({ offset: 100, duration:700, easing:"ease-out-quad", once:!0 }); window.addEventListener('load', AOS.refresh); });

[MrSunshyne]

hi @aribudin is that $ for jQuery ?

[aribudin]

hi @aribudin is that $ for jQuery ?

yes sir

[MrSunshyne]

thanks for the suggestions. Most of the recent comments are about using aos in Nuxt. jQuery in not present in these situation unfortunately :(

[MrSunshyne]

@aribudin I followed your logic and added the following into pages/index.vue

and

 import AOS from 'aos';
.
.
.
  mounted() {
    AOS.refresh()
  },

I ran npm generate and loaded the dist folder in the browser.

it did not animate anything:( everything stays hidden and there are no errors

[dacxjo]

Same here with Nuxt

[akitoshi]

Same problem with nuxt.js, do you have an alternative?

[ortonomy]

Also not working well in Nuxt. In my case, it animates the first elements that I put use AOS at top of page (so it animates as soon as page loads) but it's not detecting the scrolling ... and everything is hidden.

[ortonomy]

For the record, the aos-init classes are correctly being applied, but no aos-animate classes are being added when the scroll is reached. It suggests the listeners are not being correctly added , or they're being removed?, or they're not being bound properly?

[anchvy]

v2.2 works for me (vue + nuxt)

[skvist]

I had the same problem when generating static files with Nuxt, tried Sal.js but the same thing happened. My culprit was purgecss that Tailwind uses, solved it by whitelisting aos css-file.

[sanysak]

Hello guys I have facing the same issue when I install aos latest version. It work when I open and close inspect element it work fine but when I refresh it not work.
So I downgrade aos to ver "3.0.0-beta.6" and it work fine.

[MrSunshyne]

@sanysak that worked for me as well! Thanks so much !!!

[JackWebs]

@skvist Could you show how you configured this? I'm having the same issue and I can't figure it out.

[skvist]

@JackWebs
I installed the package purgecss-whitelister and excluded the css-files like this:

// nuxt.config.js
purgeCSS: {
    whitelist: () => whitelister([
      './node_modules/@fortawesome/fontawesome-svg-core/styles.css',
      './node_modules/sal.js/dist/sal.css'   
    ])
  }

[JackWebs]

@JackWebs
I installed the package purgecss-whitelister and excluded the css-files like this:

// nuxt.config.js
purgeCSS: {
    whitelist: () => whitelister([
      './node_modules/@fortawesome/fontawesome-svg-core/styles.css',
      './node_modules/sal.js/dist/sal.css'   
    ])
  }

Thank you, this somewhat fixed my issue.
The animation triggers work now but instead of a smooth fade-in the elements just appear immediately.

My dev build shows these styles being applied, whereas in my production build they are missing.

[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease;
}

[data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] {
    transition-duration: .8s;
}

Any ideas as to why?

[shubham-ghuge]

to whomever having this issue try to add this at the end before

and remove data-aos-offset this worked for me!!

[BigPackie]

I created fresh project with https://parceljs.org and used [email protected] with exactly this code:

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

AOS.init()

And still everything works fine. I'm need your help guys. Can you please provide codepen/codesandbox/repository that reproduces the problem? That would be really helpful. I can't get it to stop working.. Once I get a broken example I will fix it.

Could you add this into the doc for parcel users? That the only need to npm install it and then add the above code into main.js. Cause it wasn't clear for me and I was trying different things until getting to this issue page, finding a solution.

On top of that it would be also nice to mention that the global anchorPlacement option is not working, so one must set them locally per element using data-aos-anchor-placement property and very important, a custom value for the anchor placement will not work unless window.addEventListener("load", AOS.refresh); is called after the init. Alternatively, one could call the init like this:

document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    AOS.init();
  }
};

[rishabh-90]

useEffect(() => {
    let scrollRef = 0

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

Solved this on Gatsby

[alaa19090]

if no error in the console /// the problem is the overflow property in any container tag and the important one is HTML and body you have to cancel it and fix your problem