Aos: Trigger aos for predefined CSS selectors

[jmarceli]

I would like to add let say "fade-up" animation to every <h2> element inside .page-content. Because content is already created I have no option to add data-aos=fade-up directly in the markup. I know that one of the possible solutions would be adding this attribute via JS before AOS initialization, but is there any other way?

If it's not possible maybe you will consider adding such feature? I think about some configuration option in init() function like this (for example):

AOS.init({
  autotrigger: [
    { selector: '.page-content h2', animation: 'fade-up', ... (other configs) }, ...(more selectors)
  ]
});

Which will animate every .page-content h2 with "fade-up" animation on scroll.

Or maybe it's a bad idea and I should add appropriate data attributes via JS?

[michalsnik]

Hey, this sound really interesting! I'll give it a second thought :)

[drawcard]

I'd like to add my vote to this, I am currently struggling with the inability to add data attributes to certain items in Wordpress and can't use AOS as a result.

[jmarceli]

As a solution you can use (for example):

$('.page-content h2').attr('data-aos', 'fade-up'); // you may add more data attributes if required

Of course, it should be executed before AOS.init(); and because of that, I'm not sure if extending this library is a good idea. Keeping it simple and oriented to do only one task makes it possible to do it well.
As for now I can't thing about any case where adding attributes via JS before plugin initialization would be impossible.

[michalsnik]

Yes, but then if some of the elements are loaded asynchronously they won't animate. By putting this inside AOS as optional setting we could make it work always with no extra effort.

[drawcard]

Cheers, I have been using jQuery to add data attributes and for the most part it works (only trouble I have is animations aren't triggered on page rendering if the element is visible / above the fold). Still works if you scroll an element into view.

[jmarceli]

Sound good to me. My only concern was connected with expanding code base by adding features that can be achieved by using existing (external) solutions (and then maintaining the code).
It might be simpler and more universal to just provide a method like:

var $domElements = $('.your .selector'); // moving element selection outside AOS
// would allow to use your favourite library for element selections e.g. jQuery, Zepto or plain JS

AOS.trigger($domElements, {/*animation params e.g.*/
  animation: 'fade-up',
  anchor-placement: 'top-bottom'
});

which will trigger the animation on selected elements. This will decouple triggering animation from initialization and would eventually allow the users to trigger AOS animations in any kind of AJAX callback function after the plugin is initialized.
I didn't look into the AOS code yet, so I don't know which one is simpler to implement, but anyway triggering AOS animation directly from JS in any moment seems to me like a feature that will be required by developers at some point.

[equinoxe-rehm]

I tried the AOS.trigger code, but I get an Error

SyntaxError: missing : after property id
if I skip the line anchor-placement: 'top-bottom', I have no error, but it is not working anyhow...
Can someone help me, because I also want to trigger Elements where I can't insert the code directly in the HTML.

[michalsnik]

Guys, sorry but given low level of interest for this feature I have to close this issue and mark it as won't do. Thanks for your understanding and effort in shaping the proposal!

[MattAppleton]

Just reanimating interest... :)

[lindsaywebstudio]

Also interested!