ScrollTriggers messes up after every vue-router page changes

[Amini]

Hi, I'm using gsap with vue & vue-router. The problem is when the page loads the first time, it works correctly with no trouble, but whenever I switch to another page using vue-router and go back, all of the animations used along with scrollTrigger is messing up. I tried these settings but weren't helpful. I'm seeking for a solution where I can fix the messing up problem. Maybe there is a way where I can kill and refresh the scrollTrigger as below but my solutions didn't work.

 

data() {
	return {
    	t: null
    }
},

methods: {
	scroll() {
    	this.t = gsap.to('.foo', {
        	x: 100,
          	scrollTrigger: '.bar'
        })
    }
},
  
mounted() {
	this.scroll();
  	// Nuxt plugins used here
  	this.$ScrollTrigger.refresh();
},

beforeDestroy() {
	this.t.kill();
  	// tried this: this.t.kill(null);
}

 

[Cassie]

Hey there!

 

It's pretty tough to troubleshoot without a minimal demo - Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue so we can see what version's you're using and dig in to the issue a bit?

 

Here's a sandbox using Vue to kick you off.

https://codesandbox.io/s/pensive-rain-1mnr74?file=/src/views/About.vue