[Question] How to change data-aos-offset on phones/tablets?

[Ahearys]

This is:

• Question

  Specifications

  • AOS version: 2.3.1
  • OS:
  • Browser:

I want to change data-aos-offset for smaller screens, because it doesn't line up as it's supposed to (e.g. content that should animate first, animates after content that should animate second, on mobile screens)

[jcbbuller]

Anyone find an answer to this? I'm having the same issue.

[Murkrow02]

I have this problem too

[TNHSAesop]

I just hacked it with the window's height. Note that this doesn't take into account browser resizing which would likely require a destroy/re-init call with an updated height. My site doesn't get enough traffic for me to care about the occasional exit that might cause though. If someone's more motivated than me to tackle that, please post your code!

offset: (jQuery(window).height() * .25)

full init that looks pretty good to me

    AOS.init({
      offset: (jQuery(window).height() * .25),
      delay: 400,
      duration: 700,
      easing: 'ease-out-back',
      anchorPlacement: 'bottom-center'

    });
  });

[oli-kester]

I just hacked it with the window's height. Note that this doesn't take into account browser resizing which would likely require a destroy/re-init call with an updated height. My site doesn't get enough traffic for me to care about the occasional exit that might cause though. If someone's more motivated than me to tackle that, please post your code!

offset: (jQuery(window).height() * .25)

full init that looks pretty good to me

    AOS.init({
      offset: (jQuery(window).height() * .25),
      delay: 400,
      duration: 700,
      easing: 'ease-out-back',
      anchorPlacement: 'bottom-center'

    });
  });

This works great, thanks! Was worried I'd have to stop using AOS due to mobile issues.

A pure-JS version to solve this issue alone -

AOS.init({ offset: (window.innerHeight * .3) })