Jump to content


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() {
  	// Nuxt plugins used here

beforeDestroy() {
  	// 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.


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.