gsap动画

[klren0312]

1. nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@hypernym/nuxt-gsap'
  ],
  gsap: {
    extraPlugins: {
      scrollTrigger: true
    }
  }
})

const { $gsap, $ScrollTrigger } = useNuxtApp()
onMounted(() => {
  const container: HTMLElement | null = document.querySelector('.card-container')
  $gsap.registerPlugin($ScrollTrigger)
  gsapAnimate.value = $gsap.timeline({
    scrollTrigger: {
      pin: true,
      trigger: '.card-container',
      start: 'top top',
      end: `+=${container?.offsetWidth || 0 - innerWidth}`,
      scrub: true
      // markers: true
    }
  })
    .to('.card-item-1', { xPercent: -90, scale: 1.1 }, 0)
    .to('.card-item-1', { xPercent: -250, scale: 1 }, 1)
    .to('.card-item-2', { xPercent: -100, scale: 1.1 }, 1)
    .to('.card-item-2', { xPercent: -250, scale: 1 }, 2)
    .to('.card-item-3', { xPercent: -100, scale: 1.1 }, 2)
    .to('.card-item-3', { xPercent: -250, scale: 1 }, 3)
    .to('.card-item-4', { xPercent: -100 }, 3)
})