Trigger vue method if is-inview via data-scroll-call?

Hey is it possible to trigger events on data-scroll-section and do animations with js instead of css? Since I want to use gsap for building the animation timeline

• index.vue / nuxtjs

<template>
  <section>
    <div id="js-scroll" :data-scroll-call="sectionAnimIsInView">
      <div data-scroll data-scroll-speed="1" class="box red"></div>
      <div data-scroll data-scroll-speed="2" class="box blue"></div>
    </div>
  </section>
</template>
<script>
// import TimelineMax from 'gsap/TimelineMax';

export default {
  data() {
    return {
      lmS: null
    };
  },
  mounted() {
    this.lmS = new this.locomotiveScroll({
      el: document.querySelector("#js-scroll"),
      smooth: true
    });
    console.log("lmS", this.lmS);
  },
  methods: {
    sectionAnimIsInView(elems) {
      // const tl = new TimelineMax();
      // tl. .... do something
    }
  }
};
</script>

https://codesandbox.io/s/codesandbox-nuxt-7kb0f

[regenrek]

It looks kind of a workaround but this is way more than I’ve expected. Thanks!

[jp-prieto]

Hey @regenrek check this out:

https://codesandbox.io/s/codesandbox-nuxt-mhobt

Hope it helps