Nuxt 3 - AnimatedContainer using @hypernym/nuxt-gsap

AnimatedContainer.vue

<template>
  <div ref="el" class="animated-container">
    <slot />
  </div>
</template>

<script setup>
const props = defineProps({
  start: { type: String, default: null },
  end: { type: String, default: null },
  markers: { type: Boolean, default: false },
})

const el = ref(null)

onMounted(async () => {
  await nextTick()

  useGsap.context((self) => {
    const slideInUp = self.selector('.slide-in-up')
    const zoomIn = self.selector('.zoom-in')
    const zoomInOut = self.selector('.zoom-in-out')
    const fadeIn = self.selector('.fade-in')

    const tl = useGsap.timeline({
      scrollTrigger: {
        trigger: el.value,
        start: props.start || 'top 85%',
        end: props.end || 'bottom top',
        markers: props.markers || false,
      },
    })

    if (slideInUp.length > 0)
      tl.add(
        useGsap.to(slideInUp, {
          opacity: 1,
          y: 0,
          stagger: 0.1,
        })
      )

    if (zoomIn.length > 0) {
      tl.add(
        useGsap.to(zoomIn, {
          opacity: 1,
          scale: 1,
          duration: 0.4,
          stagger: 0.15,
        }),
        0
      )
    }

    if (zoomInOut.length > 0) {
      tl.add(
        useGsap.to(zoomInOut, {
          opacity: 1,
          scale: 1,
          duration: 0.3,
          stagger: 0.15,
          ease: 'back.out(2)',
        }),
        0
      )
    }

    if (fadeIn.length > 0) {
      tl.add(
        useGsap.to(fadeIn, {
          opacity: 1,
          duration: 0.4,
          stagger: 0.15,
        }),
        0
      )
    }
  }, el.value)
})
</script>

<style>
body:not(.live-preview) {
  .animated-container {
    .slide-in-up {
      opacity: 0;
      transform: translateY(2.5rem);
    }

    .fade-in {
      opacity: 0;
    }

    .zoom-in {
      opacity: 0;
      transform: scale(0.9);
      transform-origin: center;
    }

    .zoom-in-out {
      opacity: 0;
      transform: scale(0.9);
      transform-origin: center;
    }
  }
}
</style>