djcali Posted February 28, 2020 Share Posted February 28, 2020 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 More sharing options...
ZachSaucier Posted February 28, 2020 Share Posted February 28, 2020 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. 1 Link to comment Share on other sites More sharing options...
djcali Posted February 28, 2020 Author Share Posted February 28, 2020 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(); } }; 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 29, 2020 Share Posted February 29, 2020 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. 😃 3 3 Link to comment Share on other sites More sharing options...
OSUblake Posted February 29, 2020 Share Posted February 29, 2020 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. 6 Link to comment Share on other sites More sharing options...
OSUblake Posted February 29, 2020 Share Posted February 29, 2020 👆 ... and convert the easing to gsap's much more compact syntax. // anime easing: 'easeInOutSine' // gsap ease: 'sine.inOut' 5 Link to comment Share on other sites More sharing options...
djcali Posted February 29, 2020 Author Share Posted February 29, 2020 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 3 Link to comment Share on other sites More sharing options...
OSUblake Posted February 29, 2020 Share Posted February 29, 2020 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 😉 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 29, 2020 Share Posted February 29, 2020 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. 1 1 2 Link to comment Share on other sites More sharing options...
OSUblake Posted February 29, 2020 Share Posted February 29, 2020 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. 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 29, 2020 Share Posted February 29, 2020 😂 The perpetual Hmmm..., we all know too well. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now