Aos: Run javascript function instead of css animation?

[felixbridell]

Hi.

Thanks again for a great plugin. Just wonder, is it possible to run a javascript function on the element instead of a css animation? Would be great to have the flexibility...

[michalsnik]

Hi, for now it's unfortunately not possible.
But it sound like something worth considering as a new feature.
I'd be happy to see if some other people would also appreciate it in future releases :)

[ErtugKaya]

I think events will be very useful and make this great plugin even greater. Maybe one trigger before the animation begins to prevent or change animation for some reason and another triggers after the animation begins to remove animation or do anything else.

For instance; I don't like items re-animate while scrolling to top and bottom again. With an event, i can easily remove animations after each item animates individually.

[michalsnik]

Hi @ErtugKaya , reanimating can actually be easily disabled using aos-once setting.

But I like your idea with different hooks that user can set on certain elements and which will be fired in specific moment. This sounds like an interesting feature to me :)

I'd be happy to see if this would be useful for other developers as well. I'm open for any suggestions :)

[fehmi]

+1

[influxweb]

Having the ability to fire a callback either during or after animation would be a great addition. I can see it being used as a way to display a section when scrolled into view; then firing the callback to lazy-load an image contained in the section.

[LucaRosaldi]

+1

[andresmgsl]

+1 it would indeed be a very useful functionality... I'm a Front-End Angular developer, and in my case, I would be able to get data from the server while scrolling, improving UI experience.

[tomByrer]

-1 for main repo; 1/2 of the point of this project vs the 10 other scroll-animation libs is the CSS animation
+1 If Felix or someone wants to have a 'friendly fork'.

[bih]

+1 for this feature.

[drawcard]

+1

[andresmgsl]

+1

[brianbento]

+1

[rutgerikoon]

Added my vote, would make this library even more useful

[hungluu]

+1

[mishalmsb]

+1

[RadiksMan]

+1

[diegohdk]

+1

[husani]

+1

[Kwapi]

+1

[donnellyjoe]

+1, would be great to have a JS animation option for something where CSS isn't enough, such as counting up numbers, or a webgl animation

[torsteinringnes]

+1

[Scordavis]

Давай! Сделай эту приблуду! )))

[npstobie]

+1

[anaparunov]

+1

[brynzovskii]

+1

[illycz]

+1

[withlovee]

+1

[StevenLewis]

+1

[michalsnik]

I've got a working prototype and I wonder what do you think guys about customEvents?
Every element while animating in or out would trigger aos:in or aos:out event, that you can listen to on document.

Also you'd be able to provide data-aos-id in order to trigger unique event:

<div data-aos="fade-in" data-aos-id="super-duper"></div>

It would trigger aos:in:super-duper and aos:out:super-duper accordingly.

Example usage:

document.addEventListener('aos:in:super-duper', ({ detail }) => {
  console.log('in!', detail);
});

details would be DOM Node that have been animated, so if you'd want to pass additional data, you could just use data-attributes and access them here: detail.getAttribute(...).

This is my proposal, but I'm open for suggestions. So feel free to share your ideas :)

[michalsnik]

I just released v3.0.0-beta.1, you play with it by installing:

yarn add aos@next

[anithegregorian]

Hey @michalsnik ,

Don't know if this is a bug but when you set data-aos-duration="900" data-aos-offset="0" data-aos-once="true" data-aos-delay="1200" attributes the events aos:in or aos:out don't get fired at all.

See this JS fiddle https://jsfiddle.net/anithegregorian/w0s4xmc0/29854/

If you remove these attributes and resize result iframe it starts working normally. Im using next branch beta4 release.

[nadafsak]

Hi @michalsnik similar to what @anithegregorian said, the event listener does not seem to be working.

However, for me - it does not matter what additional attributes have been added.

Even on @anithegregorian 's JSfiddle, removing the additional properties still doesn't fire the event and when I use [email protected] locally.

[Harti]

I stumbled across this issue while I was looking for an event being fired when an element simply _fulfills_ the AOS anchor requirements.

Use case:

• I need "scrollspy"-like functionality for a project. I don't want to use bloated/cluttered/unflexible third-party software, especially _when AOS already runs exactly those element visibility checks_. I don't want any prepared markup nor auto-highlighting, I just need a mere event telling me that the element arrived at the anchor.
• I _do not want to have to animate those nodes_ for this event to be fired.

Would this be feasible?

[lsterling03]

Just wanted to thank you for this. The event listener @michalsnik proposed works great for me.

[otlyn]

Hi, thank you for the awesome plugin. I was wondering if you could make a working JS Event example on codepen.io to fire a console log or something. I've tried it myself, but I'm having difficulty. Thanks in advance!

[michalsnik]

@otlyn Thanks! Please make sure you use aos@next and follow this comment: https://github.com/michalsnik/aos/issues/17#issuecomment-389356236