Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
djcali

Remove timeline when leaving page

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

👆 ... and convert the easing to gsap's much more compact syntax.

 

// anime
easing: 'easeInOutSine'

// gsap
ease: 'sine.inOut'

 

  • Like 5

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
11 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! 🤣 

 

Oh, you're good. I was just trying to provide some helpful hints to make the transition easier 😉

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
1 hour ago, Shrug ¯\_(ツ)_/¯ said:

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

 

Ha. I wish. I'm more like the guy at the end of this video. I just stare and ponder about code for hours on end while stroking my beard.

 

 

 

  • Haha 2

Share this post


Link to post
Share on other sites

😂 The perpetual Hmmm..., we all know too well.

  • Haha 1

Share this post


Link to post
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.

×