Aos: Disable aos-delay for mobile layout

[tyler-insight]

Love how easy this is to implement and use, the only issue I'm having is that if I want to use data-aos-delay to offset the timing of animations to create a more unique experience on desktop, I don't want this to happen on mobile.

For instance, I might have three images in a single row on desktop, and I use delay so that the first image animates, the second one does shortly after, and the third one last. However, on mobile, these images are now stacked instead of side by side, so now I want them to animate without delay since they won't all be on screen at the same time.

[michalsnik]

Hey, sorry for late answer. I get your point here, however this library was specifically made using CSS, so that you can override whatever you need dynamically. In your case you could just add:

@media screen and (max-width: 480px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

and it should work as you expect :) Let me know if this works for you.

[zzseba78]

For me it works if you add s, i don't know why. Without it it doesn't change.

[data-aos-delay] {
    transition-delay: 0s !important;
}

[michalsnik]

Good point @zzseba78, I did a mistake there :)

[Potato1312]

How about offset?

[lorynchen]

is there any way to disable aos-delay for specific classes and NOT the whole page entirely?