aos:out/in and mirror not working

[SueIte]

This is:

• Question

Hi there! I was wondering if Iam doing something wrong. The eventlisteners aren't working at all, I tried out adding an id for one of them but that didnt work as well.
The mirror value doesn't work as well. The element isn't animating out when scrolling past its point.

this is my code:

  <div id="root">
      <div class="h-600 w-100" id="red"></div>
      <div class="h-600 w-100" id="blue"></div>
      <img id="test" src="tog.jpg" data-aos="fade-right" data-aos-id="super-duper" data-aos-duration="1000" alt="" width="442" height="411">
      <img src="tog.jpg" data-aos="fade-left" data-aos-duration="1000" alt="" width="442" height="411">
      <div class="h-600 w-100"></div>

  </div>
  <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
  <script>
    AOS.init({
        once: true,
        mirror: true
    });

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

    document.addEventListener('aos:out', ({ detail }) => {
      console.log('animated out', detail);
    });
  </script>

[foria]

+1

[kavasey]

Hi @SueIte
Could you check the version you are using?
Use the latest aos@next version to see if your issue is not because of the version mixed up.
https://unpkg.com/aos@next/dist/aos.js

Thanks

[michalsnik]

v2 doesn't have events feature. It has been added in v3 (next) @SueIte