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