Jump to content
GreenSock

Amini

ScrollTriggers messes up after every vue-router page changes

Recommended Posts

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);
}

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×