Using AOS library with Vue

Question

I use AOS (Animate on scroll) library with vue. AOS provides custom JS event: document.addEventListener('aos:in', ({ detail }) => { console.log('animated in', detail); });

I would like to fire a function when this event happens. How do I apply that into my vue component? It would look like: v-on-aos:in using v-on / @, but it doesn't work.

This is what I have tried: <div v-on:aos:in="myFunction" />

are you sure the event bubbles or can reach the div you want?, maybe it is only listenable on document level and does not propagate to specific elements — Nikos M., Nov 14 '18 at 18:26
`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:` - as author says, and yeah, it works with @click event, the only problem is that `aos:in`. — kabugh, Nov 14 '18 at 18:32

score 3 · Accepted Answer · answered Nov 14 '18 at 19:16

3

Add your document event listeners on created method, then pass your vue component method.

  created() {
    document.addEventListener('aos:in', this.aosEvent)
  },
   methods: {
    aosEvent(d){
      // event data
      console.log(d);
    }
  }

answered Nov 14 '18 at 19:16

calmar

1,930
1
14
15

Using AOS library with Vue

1 Answers1