Run javascript function instead of css animation? about aos HOT 36 CLOSED

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 :)

from aos.

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 :)

from aos.

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.

from aos.

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

from aos.

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 :)

from aos.

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.

from aos.

+1

from aos.

+1

from aos.

+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.

from aos.

-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'.

from aos.

+1 for this feature.

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

Added my vote, would make this library even more useful

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

+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

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

+1

from aos.

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

yarn add aos@next

from aos.

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.

from aos.

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.

from aos.

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?

from aos.

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

from aos.

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!

from aos.

@otlyn Thanks! Please make sure you use aos@next and follow this comment: #17 (comment)

from aos.