Aos: Question: What does data-aos-offset do?

Created on 17 May 2018  路  1Comment  路  Source: michalsnik/aos

Sorry I tried everything but I just don't get what data-aos-offset does. I tried with 0px, 100px, 1000px (of course without px), but I don't see any differences. If I read the doc: "Change offset to trigger animations sooner or later". That means for me when data-aos-anchor-placement is set to e.g. top-bottom, it triggers the animation sooner (a tick before reaching the top-bottom) or later.

So what does it do?

question

Most helpful comment

Hey @pmochine This setting does exactly what you though it does. It shifts the trigger point of the animation. If you set offset to 0, it means that with default (top-bottom) anchor placement it will animate once top of the element hits the bottom of the screen. If you however set it to 200, it means that you'll have to scroll additional 200px to see the animation.

I just checked this in 2.3.0 and it works fine. You may however have problem with something else. Please try to add:

window.addEventListener('load', AOS.refresh);

Or use startEvent to delay AOS initial calculations:

AOS.init({
  startEvent: 'load',
});

If you'll still experience some problems, feel free to reopen this issue :)

>All comments

Hey @pmochine This setting does exactly what you though it does. It shifts the trigger point of the animation. If you set offset to 0, it means that with default (top-bottom) anchor placement it will animate once top of the element hits the bottom of the screen. If you however set it to 200, it means that you'll have to scroll additional 200px to see the animation.

I just checked this in 2.3.0 and it works fine. You may however have problem with something else. Please try to add:

window.addEventListener('load', AOS.refresh);

Or use startEvent to delay AOS initial calculations:

AOS.init({
  startEvent: 'load',
});

If you'll still experience some problems, feel free to reopen this issue :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

skube picture skube  路  4Comments

noisypope picture noisypope  路  4Comments

AndTheGodsMadeLove picture AndTheGodsMadeLove  路  3Comments

SueIte picture SueIte  路  3Comments

luminawastaken picture luminawastaken  路  3Comments