AOS (Animate on Scroll) - how to target elements without editing html?

Hi all,

Wondering if this is even possible, or if it is but I’m totally missing something in the documentation:
https://michalsnik.github.io/aos/

I’ve often gone to AOS for basic scrolling animations and it works like a charm. I would really love to figure out a way of being able to target elements by class name or the element itself, rather than having to hard code the data attribute to each element manually. There are scenarios where it would either be too labour intensive or it’s not even possible.

I know that the attribute could be added to chosen html elements with some javascript, but is that the cleanest way?

Thanks!

Pat

The cleanest way is to edit the html to include the attribute in the html itself. The other way would be to use javascript to apply the appropriate attribute to any element with specific css classes or ids.

But if you’re editing the html to add classes or ids anyway, wouldn’t it just make sense to add the data attributes directly? Seems like less work in the long run and probably safer as you get more complex with your css and such, ensuring you only apply this additional JS appropriately AND before the AOS JS load runs. Seems like a lot more effort and risk doing it that way…

1 Like

Thanks Dave, I hear you.

This is exactly how I’ve applied it in the past when building myself. I just have this situation where I’ve been handed a site built by someone else in Elementor page builder and asked if I can apply scrolling animations on pretty much everything as it enters the screen, a mess I know! Elementor has its own entrance animations, but I don’t like how drastic they are and this would also involve going in and applying it to each element one by one.

I’ve used AOS before and really like it, therefore I was wondering if there was a way of targeting elements from an external source rather than editing html. Seems not, I’ll just have to go in and do it manually!

Thanks for your reply, appreciate it.

1 Like

I can see why you’re looking for an alternative, but based on the documentation on the github page, it doesn’t look like the developer added that kind of hook in - which I understand since he was trying to make it as unobtrusive as possible (i.e. if he allowed common classes, he might conflict with other behavior attached to those classes/ids).

1 Like