Vue-Router 和 Gsap ScrollTrigger

Posted 2023-05-08

【中文标题】Vue-Router 和 Gsap ScrollTrigger

【英文标题】：Vue-Router and Gsap ScrollTrigger

【发布时间】：2021-07-04 08:10:31

【问题描述】：

vue-router 和 gsap 的 scrolltrigger 插件有一些问题。 我有一些使用 scrolltrigger 的 vue 组件，当我转到另一个页面并返回具有滚动触发器效果的页面时，它不会触发，但如果我手动刷新页面则可以工作。

我发现这个话题的人对 NuxtJs 有同样的问题，但是 ScrollTrigger.disable() 和 ScrollTrigger.kill() 解决方案对我不起作用： https://greensock.com/forums/topic/24886-in-nuxt-when-using-scrolltriggerkill-how-can-it-run-again-when-page-is-viewed/

这是我用 ScrollTrigger 制作的一个组件：

模板部分

<template>
<section class="marquee">
    <div class="marquee__inner" aria-hidden="true" ref="inner">
      <div class="marquee__part">food wine fish beef vegetables</div>
          <div class="marquee__part">food wine fish beef vegetables</div>
          <div class="marquee__part">food wine fish beef vegetables</div>
          <div class="marquee__part">food wine fish beef vegetables</div>
          <div class="marquee__part">food wine fish beef vegetables</div>
    </div>
</section>
</template>

脚本部分

<script>
import gsap from "gsap"
import ScrollTrigger from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

export default 
  name: 'ServicesMarquee',
  data() 
    return 
      currentScroll: 0,
      isScrollingDown: true,
      test: null,
    
  ,
  methods: 
    scrollAnim() 
      gsap.to(this.$refs.inner, 
        xPercent: -65,
        scrollTrigger: 
          trigger: ".marquee",
          start: "top bottom",
          end: "top top",
          scrub: 0,
        
      )
    ,
  ,
  mounted() 
    gsap.set(this.$refs.inner, xPercent: -50);
    let tween = gsap.to(this.$refs.inner.querySelectorAll('.marquee__part'), xPercent: -100, repeat: -1, duration: 10, ease: "linear").totalProgress(0.5);
    let self = this

    window.addEventListener("scroll", function()
      if ( window.pageYOffset > self.currentScroll ) 
        self.isScrollingDown = true;
       else 
        self.isScrollingDown = false;
      
        
      gsap.to(tween, 
        timeScale: self.isScrollingDown ? 1 : -1
      );
      self.currentScroll = window.pageYOffset
    );
    
    gsap.to(this.$refs.inner, xPercent: -65 );
    this.scrollAnim()
  

</script>

【参考方案1】：

我在 *** 和 GSAP 论坛上阅读了有关此问题和类似问题的所有文章，YES setTimeout 工作正常，但这不是答案。

我也很困惑，这个问题并没有影响到很多人，但他们描述的情况几乎相同，当您浏览页面（路由）并返回上一个时 vue + router + gsap + scrolltrigger 停止工作一个有动画的（动画在这种情况下不起作用）。

所以伙计们，首先看看上面的<transition> <router-view>。当您同时拥有上一页和下一页的组件时，就会出现此问题，而 ScrollTrigger 会计算当时的值 (offsetTop)

【讨论】：

嘿，您找到解决此问题的任何方法了吗？我有同样的问题，如果我在页面之间导航，ScrollTrigger 会表现得很奇怪，并导致一些元素动画无法启动。有时它甚至会抛出错误Cannot read properties of undefined (reading 'pin')

你在 上有 吗？