Nuxt 3 + GSAP

Ok so im not having any issues getting GSAP to work with NUXT3 but more like can someone help me in the right direction

My template =

 <div class="grid">
        <template v-for="teaser in episodes" :key="teaser.name">
          <Teaser v-bind="teaser" class="teaser" />
        </template>
      </div>

 <div class="grid">
        <template v-for="teaser in episodes" :key="teaser.name">
          <Teaser v-bind="teaser" class="teaser" />
        </template>
      </div>

My script part =

onMounted(() => {
  ctx = gsap.context((self) => {
    if (self.selector) {
      const teasers = self.selector('.teaser');
      ScrollTrigger.batch(teasers, {
        onEnter: (batch) =>
          gsap.to(batch, {
            filter: 'blur(0px)',
            autoAlpha: 1,
            y: 0,
            stagger: {
              each: 0.1,
              onComplete() {
                console.log(this.targets[0]);
              },
            },
          }),
      });
    }
  }, main.value); // <- Scope!
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});

onMounted(() => {
  ctx = gsap.context((self) => {
    if (self.selector) {
      const teasers = self.selector('.teaser');
      ScrollTrigger.batch(teasers, {
        onEnter: (batch) =>
          gsap.to(batch, {
            filter: 'blur(0px)',
            autoAlpha: 1,
            y: 0,
            stagger: {
              each: 0.1,
              onComplete() {
                console.log(this.targets[0]);
              },
            },
          }),
      });
    }
  }, main.value); // <- Scope!
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});

What i want to do is trigger a prop inside the teaser when each indivudual teaser has finished the animation ( so in stagger you will see the onComplete this works ) but i cant figure out how to change a prop of an element when the animation is completed for the specfic item
does anyone knows ?

Nuxt 3 + GSAP

Ok so im not having any issues getting GSAP to work with NUXT3 but more like can someone help me in the right direction

My template =

 <div class="grid">
        <template v-for="teaser in episodes" :key="teaser.name">
          <Teaser v-bind="teaser" class="teaser" />
        </template>
      </div>

 <div class="grid">
        <template v-for="teaser in episodes" :key="teaser.name">
          <Teaser v-bind="teaser" class="teaser" />
        </template>
      </div>

My script part =

onMounted(() => {
  ctx = gsap.context((self) => {
    if (self.selector) {
      const teasers = self.selector('.teaser');
      ScrollTrigger.batch(teasers, {
        onEnter: (batch) =>
          gsap.to(batch, {
            filter: 'blur(0px)',
            autoAlpha: 1,
            y: 0,
            stagger: {
              each: 0.1,
              onComplete() {
                console.log(this.targets[0]);
              },
            },
          }),
      });
    }
  }, main.value); // <- Scope!
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});

onMounted(() => {
  ctx = gsap.context((self) => {
    if (self.selector) {
      const teasers = self.selector('.teaser');
      ScrollTrigger.batch(teasers, {
        onEnter: (batch) =>
          gsap.to(batch, {
            filter: 'blur(0px)',
            autoAlpha: 1,
            y: 0,
            stagger: {
              each: 0.1,
              onComplete() {
                console.log(this.targets[0]);
              },
            },
          }),
      });
    }
  }, main.value); // <- Scope!
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});

Nuxt 3 + GSAP

Similar Threads

Nuxt 3 + GSAP

Similar Threads

Similar Threads

Similar Threads