Tween timeScale()

[Radar18]

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

[Rodrigo]

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!

[Radar18]

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

[Radar18]

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

 

 

[Rodrigo]

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!