Jump to content
Search Community

Remove timeline when leaving page

djcali test
Moderator Tag

Recommended Posts

Hello,

 

I finally finished my slider. I have implemented it on my home page in my app. (I'm using Vue.js btw).  I noticed when I leave the home page and goto an about page for example, I see the console giving me gsap target not found errors. I realize that the timeline from the homepage is still playing.  I guess my question is how would I go about killing the timeline when traveling to another page?  My code for the slider starts autoplay from the start.

 

Thanks !

 

See the Pen abOmexV by djcali (@djcali) on CodePen

Link to comment
Share on other sites

Hey djcali.

 

2 hours ago, djcali said:

how would I go about killing the timeline when traveling to another page?

How are you transitioning between pages? If Vue does a "fake" page transition, meaning it dynamically loads new content without actually refreshing the page, then inside of a callback/event listener for that transition you should be able to clean up your timeline. 

  • Thanks 1
Link to comment
Share on other sites

 

Solved it.  Had to do something like this... Thanks again.

 

In the js file.

export function gsapSlider(status) {

if (status == "start") {

startSlider();

}



if (status == "kill") {

tl.kill();

}

}

 

In the Vue Component.

import gsap from "gsap";

import { gsapSlider } from "../assets/js/gsapSlider";

export default {

props: { pSliderData: Array },

data() {

return {

sliderData: this.pSliderData

};

},

mounted() {

gsapSlider("start");

},

methods: {

killSlider() {

gsapSlider("kill");

}

},

beforeDestroy() {

this.killSlider();

}

};
  • Like 1
Link to comment
Share on other sites

Nice slider @djcali congrats.

 

But no one is gonna talk about the elephant 🐘 in the room of loading Anime to tween strokeDashoffset? 😜 Sorry I couldn’t resist, I just can’t remember seeing the two used like that. But you should be able to do the same with GSAP and only load one library. Maybe more people do this I just can't recall seeing it. 😃

  • Like 3
  • Haha 3
Link to comment
Share on other sites

2 hours ago, Shrug ¯\_(ツ)_/¯ said:

But no one is gonna talk about the elephant 🐘 in the room of loading Anime to tween strokeDashoffset? 😜 Sorry I couldn’t resist, I just can’t remember seeing the two used like that.

 

Haha. I didn't see that, but yeah, gsap can do everything anime is doing. To convert it to gsap, all you really need to do is replace anime with gsap.to...

 

// anime
anime({})

// gsap
gsap.to({})

 

change the duration from ms to s....

// anime 
duration: 380

// gsap
duration: 0.38

 

and change the order of the parameters in the functions.

// anime
delay: function (el, i) {
  return i * 250;
}

// gsap
delay: function (i, el) {
  return i * 250;
}

 

Well, that's all you need to do syntax wise. I don't know about logic wise as I didn't look what's happening inside the provided code as 300 lines of code is way too much for me to sift through.

 

  • Like 6
Link to comment
Share on other sites

Hey!

 

I'm still a newbie with Gsap so all my animations were done with anime,  so give a brother time to convert over! 🤣 

 

So far the greensock community has been nothing but amazing..  I really appreciate the love!  

 

Thanks for the input and I figured it out.

 

See the Pen MWwoaop by djcali (@djcali) on CodePen

  • Like 3
Link to comment
Share on other sites

10 minutes ago, djcali said:

I'm still a newbie with Gsap so all my animations were done with anime,  so give a brother time to convert over! So far the greensock community has been nothing but amazing..  I really appreciate the love!

 

Take all the time you need and welcome to the forum and GSAP @djcali.

 

Its really wonderful to hear that you are enjoying things thus far. This community is a shining example of just one of the aspects that sets Greensock apart from others. Without listing all the other amazing benefits that largely go unoticed which make Greensock the standard.

 

You're gonna love it, plus you will soon realize @OSUblake secretly is this guy.

 

giphy.gif

  • Like 1
  • Thanks 1
  • Haha 2
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.
×
×
  • Create New...