Radar18 Posted October 11, 2022 Share Posted October 11, 2022 Hi All, Trying to work out how to tween timeScale. I want a car wheel to spin but gradually slow (decelerate) to a stop. (I'm using a square in the CodePen). Tried tons of tutes and code examples - my latest attempt is shown in the attached CodePen. Too bad the only thing spinning correctly is my head 😜 Hoping someone can show me how I can twee timeScale() correctly (if that is indeed the best way to approach this problemo). See the Pen VwxqbOz by Radar18 (@Radar18) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 12, 2022 Share Posted October 12, 2022 Hi @Radar18 and welcome to the GreenSock forums! The main problem is that you are adding a GSAP instance to a timeline after another instance that repeats forever and has an infinite duration so, when exactly will start the instance that slows down the other? 🤷♂️ In this cases is better to either use a delay or an event to start the instance the tweens the TimeScale: const rotate = gsap .timeline() .to("#wheel", { rotation: 360, repeat: -1, duration: 3, timeScale: 3, transformOrigin: "50% 50%", ease: "none" }); // Slow down after click event const btn = document.getElementById("btn"); btn.onclick = () => { gsap.to(rotate, { timeScale: 0, duration: 2, ease: "power2.out" }); }; Here is a live example: See the Pen eYrbRrg by GreenSock (@GreenSock) on CodePen Let us know if you have any other question. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Radar18 Posted October 12, 2022 Author Share Posted October 12, 2022 Hi @Rodrigo, Thanks for responding. OK, I understand your explanation but I'm hoping I can get the wheel to automatically slow down after a few seconds, without the user having to click a button. I've just had a look through GSAP docs and it looks like you can call a function from a timeline. I've had a go at doing this but it doesn't work (see new CodePen below) - probably because I suck at coding😬. Wondering what I've done wrong? See the Pen ZEoVJGJ by Radar18 (@Radar18) on CodePen Link to comment Share on other sites More sharing options...
Radar18 Posted October 12, 2022 Author Share Posted October 12, 2022 Hi @Rodrigo Hey, think I got it! 😀 See Codepen below. Is this the correct way to do it? I mean, it seems to work but is the code valid / acceptable? Regards, Radar See the Pen vYjvJjY by Radar18 (@Radar18) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 12, 2022 Share Posted October 12, 2022 Hey Radar, I think a cleaner approach could be use a Delayed Call in order to call the function: const rotate = gsap.timeline() .to("#wheel", {rotation: 360, repeat: -1, duration: 1, timeScale: 6, transformOrigin: "50% 50%", ease: "none"}); function myFunction(){ gsap.to(rotate, { timeScale: 0, duration: 2, ease: "power2.out" }); } gsap.delayedCall(2, myFunction); Happy Tweening! 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