scroll trigger does not work on product template id change gridsome

[paisak]

Hello, I am running gsap scroll trigger animation on product template that renders based on product slug. When first product is loaded animation starts on mounted hook and works prefectly, however when I change route to different product, scrollTrigger stops working and page needs to be refreshed for it to restart and work. My thinking is I should set up some watcher to watch whether product slug changes or kill animation when different product is rendered. However I am not sure how can I do this. Pls can you help?

 

import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger)

mounted(){
  this.sectionToAnimateOnScroll()
},
methods:{
  sectionToAnimateOnScroll(){
    const { section } = this.$refs;
    const { header } = this.$refs;

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: section
        start: "top 85%",
        end: "top 20%",
        scrub: 1,
        toggleActions: "restart pause resume none",
      }
    });
    tl.from(header, {
      scale:'1.2',
      ease: "sine.out", 
      duration:4,
    })
  }
}

 

[OSUblake]

Hi paisak!

 

You need to cleanup your component before it gets removed. That means killing every animation and scroll trigger it created.

 

beforeDestroy() {
  this.myAnimation.kill();
  this.myAnimation = null;
  
  // Get a trigger you set an id on
  ScrollTrigger.getById("myScrollTrigger").kill();
  
  // Or kill every scroll trigger
  ScrollTrigger.getAll().forEach(t => t.kill());
}

 

Documentation

https://greensock.com/docs/v3/GSAP/Timeline/kill()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.getById()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.getAll()

 

[paisak]

Hi OSUblake,

Thank you for quick reply. I followed your suggestion and added beforeDestroy() hook like below with ScrollTrigger id assigned, however although animation works - on the each route change I am getting error:  "TypeError: this.sectionToAnimatedOnScroll.kill is not a function"....??

 

 

 

mounted(){
  this.sectionToAnimateOnScroll()
},
beforeDestroy() {
        this.sectionToAnimateOnScroll.kill();
        this.sectionToAnimateOnScroll = null;
        
        ScrollTrigger.getById("sectionTrigger").kill();
},
methods:{
  sectionToAnimateOnScroll(){
    const { section } = this.$refs;
    const { header } = this.$refs;

    const tl = gsap.timeline({
      scrollTrigger: {
        id: "sectionTrigger",
        trigger: section
        start: "top 85%",
        end: "top 20%",
        scrub: 1,
        toggleActions: "restart pause resume none",
      }
    });
    tl.from(header, {
      scale:'1.2',
      ease: "sine.out", 
      duration:4,
    })
  }
}

[OSUblake]

sectionToAnimatedOnScroll is the name of your method, so of course that will throw an error. I was was trying to show that you should kill everything that you created. Always clean up after yourself.

 

this.myAnimation = gsap.timeline()

...

beforeDestroy() {
  this.myAnimation.kill();
  this.myAnimation = null;
  
  ...
}

 

That advice extends to basically anything that might be running. Like if you have a setInterval running, that will keep running until you clear it. Code doesn't magically stop just because your component is removed.

 

mounted() {
  this.timer = setInterval(() => {
    console.log("I'm running");
  }, 1000);
},
beforeDestroy() {
  clearInterval(this.timer);
}

 

[paisak]

ok, will do,  noted with thanks

[paisak]

Will it be correct if I set up my animation directly in the mounted hook, without using the method as per my original set up? As then I can easily access animation in the beforeDestroy() hook  and kill it, or is this not a recommended solution? I have already tried this set up and it works and resolves issues with scrollTrigger animation in different rendered products...however I am not sure this will be an efficient way....Thanks for all help.

[OSUblake]

It's going to work the same either way.

[paisak]

ok, thanks