在 Nuxt 项目中将 Scrolltrigger 与 Lenis 混合

Question

我在 nuxt 组件中制作滚动触发动画时遇到一些麻烦。

基本上我有一个用于 nuxt 页面的 lenis 脚本，并且在该页面内有一个用于 projectItem.vue 组件的滚动触发脚本。我通过 npm 安装了 gsap 并将其导入到页面和组件中。

代码似乎有效，因为我们进入了 onEnter() 回调，但根本没有动画。

<script>
import { gsap } from "gsap";
import ScrollTrigger from 'gsap/ScrollTrigger';

export default {

  mounted() {
    gsap.registerPlugin(ScrollTrigger);
    const trigger = this.$refs.animtrigger; 
    console.log(trigger);
    gsap.to(trigger, {
      scrollTrigger: {
        trigger: trigger, 
        start: 'top center', 
        y: '-=100px', 
        ease: "power1.inOut",
        stagger: .2,
        onEnter: () => {
          console.log('coucou')
        }
      }
    })
  },

  props: {
  titre: String,
  type: String,
  composition: Array,
  outils: Array,
  date: String,
  image: String,
  alt: String
  }

}

</script>

<template>
  <div class="projectItem" ref="animtrigger">
    <div class="column">
      <div class="column-c-image">
        <img :src="(image)" :alt="(alt)" class="image">
      </div>
      <div class="column-c-content">
        <p>{{titre}}</p>
      <svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.22438 17.9287C6.36591 18.0667 6.55676 18.1423 6.75438 18.1387C6.95141 18.1391 7.14109 18.064 7.28438 17.9287L16.6144 8.58994V16.6487C16.6144 17.0629 16.9502 17.3987 17.3644 17.3987C17.5658 17.4042 17.7608 17.3273 17.9042 17.1857C18.0477 17.0442 18.1272 16.8502 18.1244 16.6487V6.9165C18.1504 6.80241 18.1498 6.68188 18.1198 6.56444C18.0519 6.29871 17.8444 6.09121 17.5787 6.02334C17.4612 5.99335 17.3407 5.99275 17.2266 6.01873H7.49438C7.08017 6.01873 6.74438 6.35451 6.74438 6.76873C6.74438 7.18294 7.08017 7.51873 7.49438 7.51873H15.5644L6.22438 16.8587C6.08085 16.9997 6 17.1925 6 17.3937C6 17.5949 6.08085 17.7877 6.22438 17.9287Z" fill="black"/>
      </svg>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

@use "~/assets/css/main.scss";
  .projectItem {
    width: 628px;

    .column {
      display: flex;
      flex-direction: column;
      gap: .2rem;

      .column-c-image {
        object-fit: cover;

        .image {
          width: 100%;
          height: 700px;
          object-fit: cover;
          border-radius: 1rem;

        }
      }

      .column-c-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }
    }
  }


</style>

谢谢你！

Answer 1

我做了一个内联 CDN 示例。当图像进入可见区域时出现，离开可见区域时消失。

const { createApp } = Vue;

const GsapExample = {
  props: {
    titre: String,
    type: String,
    composition: Array,
    outils: Array,
    date: String,
    image: String,
    alt: String,
  },
  mounted() {
    gsap.registerPlugin(ScrollTrigger);
    
    const trigger = this.$refs.animtrigger;
    const timeline = gsap.timeline({
      scrollTrigger: {
        trigger: trigger, 
        start: 'top center', 
        toggleActions: "play none none reverse"
      }
    });

    timeline.from(trigger, {
      y: -100,
      opacity: 0,
      ease: "power1.inOut",
    });
  },
  template: `
    <div class="projectItem" ref="animtrigger">
      <div class="column">
        <div class="column-c-image">
          <img :src="(image)" :alt="(alt)" class="image">
        </div>
        <div class="column-c-content">
          <p>{{ titre }}</p>
        <svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.22438 17.9287C6.36591 18.0667 6.55676 18.1423 6.75438 18.1387C6.95141 18.1391 7.14109 18.064 7.28438 17.9287L16.6144 8.58994V16.6487C16.6144 17.0629 16.9502 17.3987 17.3644 17.3987C17.5658 17.4042 17.7608 17.3273 17.9042 17.1857C18.0477 17.0442 18.1272 16.8502 18.1244 16.6487V6.9165C18.1504 6.80241 18.1498 6.68188 18.1198 6.56444C18.0519 6.29871 17.8444 6.09121 17.5787 6.02334C17.4612 5.99335 17.3407 5.99275 17.2266 6.01873H7.49438C7.08017 6.01873 6.74438 6.35451 6.74438 6.76873C6.74438 7.18294 7.08017 7.51873 7.49438 7.51873H15.5644L6.22438 16.8587C6.08085 16.9997 6 17.1925 6 17.3937C6 17.5949 6.08085 17.7877 6.22438 17.9287Z" fill="black"/>
        </svg>
        </div>
      </div>
    </div>
  `,
};
  
const app = createApp({
  components: {
    GsapExample
  },
}).mount('#app');

.projectItem {
  margin-top: 300px;
  width: 200px;
}

.projectItem .column {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.projectItem .column .column-c-image {
  object-fit: cover;
}

.projectItem .column .column-c-image .image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 1rem;
}

.projectItem .column .column-c-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<div id="app">
  <gsap-example
    titre="Title"
    type="Type"
    :composition="['Composition1', 'Composition2']"
    :outils="['Tool1', 'Tool2']"
    date="2024-04-24"
    image="https://picsum.photos/200/200"
    alt="Image Alt"
   />
</div>