SOLVED Create a Custom Events?

Questions
1

Im using the animation on scroll script (https://github.com/michalsnik/aos) and Im trying to get a custom event to work, but no luck!

They say that this should work.

“AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you can do extra stuff in JS:”

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

" You can also tell AOS to trigger custom event on specific element, by setting data-aos-id attribute:"

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

Then you’ll be able to listen for two custom events then:

  • aos:in:super-duper
  • aos:out:super-duper

So this is not working so I tested with this instead.

If I create an event on page init, it works, it writes to the console.

app.on('pageInit', function (page) {
  // do something on page init
  console.log('this event is working')

});

So I thought that this should work.

  app.on('aos:in:super-duper', function (page) {
      // do something on page init
      console.log('super-duper is working')

    });

But it is not working, so where do I go wrong?
Can´t framework7 listen for the event or is the aos script simply not working as it should?

Any input really appreciated, thanks.

Solved, I simply used the wrong aos version where events wasnt working :slight_smile: