GSAP - Types error

[ivodolenc]

Discussed in #46

^{Originally posted by GuillaumeDgr May 18, 2023}
Hi,
Could you pls provide a small example of effect with scroll trigger (fade in effect for example / with Nuxt 3)? I cannot make this work...
Many thanks.

nuxt.config.js :
modules: [ "@hypernym/nuxt-gsap", ], gsap: { extraPlugins: { scrollTrigger: true, }, },

Component :

<div id="js-trigger">
<h2 class="itemA">Test</h2>
<p class="itemB">Test</p>
</div>

<script setup lang="ts">
const { $gsap, $ScrollTrigger } = useNuxtApp();

function firstTween() {
$gsap.to(".itemA", {
  scrollTrigger: {
    id: "firstTween",
    trigger: "#js-trigger",
    start: "center 25%",
    end: "center 75%",
    scrub: 1,
    markers: true,
  },
  x: 300,
  opacity: 0,
  stagger: 0.1,
});
}

function secondTween() {
$gsap.fromTo(
  ".itemB",
  {
    x: 300,
    opacity: 0,
    stagger: 0.1,
  },
  {
    scrollTrigger: {
      id: "secondTween",
      trigger: "#js-trigger",
      start: "center 15%",
      end: "center 95%",
      scrub: 1,
      markers: true,
    },
    x: 0,
    opacity: 1,
    stagger: 0.1,
  }
);
}

onMounted(() => {
firstTween();
secondTween();
});

onBeforeUnmount(() => {
// Returns the ScrollTrigger with unique Id
// and kills it before route change
$ScrollTrigger.getById('firstTween').kill()
$ScrollTrigger.getById('secondTween').kill()
});
</script>

No effect is working and error is shown : "Property 'getById' does not exist on type '_ScrollTrigger'. Did you mean to access the static member '_ScrollTrigger.getById' instead?Vetur(2576)"

Thanks