Nuxt 3 with ScrollTrigger does not work

[GuillaumeDgr]

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

[ivodolenc]

Hi,

Here is a simple example of animateOnScroll:

<template>
  <div class="content">
    <div class="box"></div>
  </div>
</template>

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

const animateOnScroll = () => {
  $gsap.to('.box', {
    x: 1000,
    ease: 'Power1.easeInOut',
    scrollTrigger: {
      trigger: '.content',
      pin: true,
      end: 'bottom',
      scrub: true
    }
  })
}

onMounted(() => {
  animateOnScroll()
})
</script>

<style>
.page-index {
  color: #fff;
  background-color: #151515;
  min-height: 100vh;
}

.content {
  width: 100vw;
  min-height: 300vh;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #fff;
}
</style>

[ivodolenc]

Hmmm it works, but there seems to be a Type error because it reports that .getById() does not exist on the $ScrollTrigger helper.

Since GSAP does not explicitly export its Types, it can be very confusing and time-consuming to know from which modules or packages we can import specific types in case we need some kind of custom solution like this module.

I have come across several reports on their forum and repository regarding Types export.

This will be fixed in the next release, thanks for reporting.

[ivodolenc]

Fixed in 2.2.2 version.

It should now work normally:

$ScrollTrigger.getById('firstTween')?.kill()
$ScrollTrigger.getById('secondTween')?.kill()

Feel free to try it out.

[GuillaumeDgr]

Hi, thanks a lot for your reactivity and help! I'll try the new version and let you know! ;)