3

I've some problems with vue-router and gsap's scrolltrigger plugin. I have some vue components using scroltrigger and when I go to a different page and came back to the page having the scrolltrigger effect it doesn't trigger, but work if I manualy refresh the page.

I find this topic with people having the same problem with NuxtJs, but the ScrollTrigger.disable() and ScrollTrigger.kill() solutions not working for me : https://greensock.com/forums/topic/24886-in-nuxt-when-using-scrolltriggerkill-how-can-it-run-again-when-page-is-viewed/

Here is a component I made with ScrollTrigger :

Template Part

<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 part

<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>
bappla
  • 55
  • 1
  • 6

1 Answers1

0

I read all the articles on this and similar problems on Stackoverflow and on GSAP forums, and YES setTimeout working, but this is not the answer.

I was also confused that the problem does not affect a large number of people, but they describe almost the same situations, when vue + router + gsap + scrolltrigger stops working when you go through the pages (routes) and return to previous one with animations (animations don't work in this case).

So guys, first of all look at <transition> above <router-view>. This is the problem when you have components from previous page AND the next page at the same time, and ScrollTrigger calculates the values (offsetTop) in that time

xaja
  • 101
  • 3
  • Hey have you found any solutions for this matter yet ? I've having same issue where if I navigate between pages, the ScrollTrigger will act weirdly and cause some element animations not to start. Sometimes It even throws an error `Cannot read properties of undefined (reading 'pin')` – xperator Mar 07 '22 at 15:52
  • have you on ? – xaja Mar 10 '22 at 13:27