How to trigger animation ends

[AdamReznicek]

This is:

• Question

Specifications

• AOS version: 2.3.1
• OS: Windows 10
• Browser: Chrome

Expected Behavior

After AOS animation ends, event should be trigged

Actual Behavior

No event trigged

Steps to Reproduce the Problem

HTML <div id="teaserIcons" class="teaser__icons" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-delay="1200" data-aos-id="teaserIcons"></div>

JS

document.addEventListener('aos:in:teaserIcons', ({ detail }) => {
  console.log('Icons ends', detail);
});

Detailed Description

How to trigger if AOS animation ends? Vanilla JS or jQuery. Thanks

Solution

Is it possible to add all elements class (for example .aos-ends) for animation ends? Thanks

My solution for now

$('#teaserIcons').one("transitionend webkitTransitionEnd oTransitionEnd", function(){
  $('#teaserIcons').addClass('afterAosAnimateEnds');
});

[wazzirul]

Thank you for the solution you provided. I have modified it to be applicable to all elements. $('.aos-init.aos-animate').one("transitionend webkitTransitionEnd oTransitionEnd", function(){ $('.aos-init.aos-animate').addClass('animated'); });