swing and stop

[Milo_506]

I have this line:

 

.from('.jersey', 15, { rotation: 3, transformOrigin:"center top", ease: 'elastic.out( 5, 0.1)', repeat: -1}, "-=0.2")

 

There is a way to make the swing stops before the 15sec?

[ZachSaucier]

Hey Milo. I'm not sure I understand what you mean. You can stop it by using .pause() or .kill(). What's your goal here?

[Milo_506]

9 minutes ago, ZachSaucier said:

Hey Milo. I'm not sure I understand what you mean. You can stop it by using .pause() or .kill(). What's your goal here?

My client wants the element swing and slow down, that's what that line does, but I need to finish the swinging before the 15 seconds to maintain the movement and the speed, so my question is if there's a way to pause the animation at the time I want not loosing the movement i have now, I just want to stop the swinging the rest of the animation has to continue normally

[ZachSaucier]

You could use .addPause() to make your timeline stop at a given point.

[Milo_506]

4 minutes ago, ZachSaucier said:

You could use .addPause() to make your timeline stop at a given point.

Thank you! 

[Milo_506]

37 minutes ago, Milo_506 said:

Thank you! 

Hey Zach, works fine but I need to stop just that line, there's a way to do that?

 

[ZachSaucier]

Technically speaking you could create the tween as a standalone tween, keep a reference to it, add it to your timeline using .add(), and then .pause() the tween reference later. Something like this:

See the Pen bGpEEXM by GreenSock (@GreenSock) on CodePen

 

So in your case that might be something like:

const rotateJersey = gsap.from('.jersey', { duration: 15, rotation: 3, transformOrigin:"center top", ease: 'elastic.out( 5, 0.1)', repeat: -1})

tl
  // your other tweens
  .add(rotateJersey, "-=0.2")

Then call rotateJersey.pause() when you need to. You might do so as a part of your timeline using the .call() method.

 

But you should try to avoid controlling tweens and timelines that are inside of timelines in general. It's best to try and leave the timeline in control of everything. This might be one of those edge cases where it might make sense. Or perhaps this should just be a standalone tween (outside of the timeline) in the first place. Hard to say given the lack of context  

[Milo_506]

24 minutes ago, ZachSaucier said:

Technically speaking you could create the tween as a standalone tween, keep a reference to it, add it to your timeline using .add(), and then .pause() the tween reference later. Something like this:

 

 

 

So in your case that might be something like:

const rotateJersey = gsap.from('.jersey', { duration: 15, rotation: 3, transformOrigin:"center top", ease: 'elastic.out( 5, 0.1)', repeat: -1})

tl
  // your other tweens
  .add(rotateJersey, "-=0.2")

Then call rotateJersey.pause() when you need to. You might do so as a part of your timeline using the .call() method.

 

But you should try to avoid controlling tweens and timelines that are inside of timelines in general. It's best to try and leave the timeline in control of everything. This might be one of those edge cases where it might make sense. Or perhaps this should just be a standalone tween (outside of the timeline) in the first place. Hard to say given the lack of context  

Really helpfull, thanks a lot Zach, and I'll try to avoid this in the future! 

 

[Milo_506]

1 hour ago, ZachSaucier said:

Technically speaking you could create the tween as a standalone tween, keep a reference to it, add it to your timeline using .add(), and then .pause() the tween reference later. Something like this:

 

 

 

So in your case that might be something like:

const rotateJersey = gsap.from('.jersey', { duration: 15, rotation: 3, transformOrigin:"center top", ease: 'elastic.out( 5, 0.1)', repeat: -1})

tl
  // your other tweens
  .add(rotateJersey, "-=0.2")

Then call rotateJersey.pause() when you need to. You might do so as a part of your timeline using the .call() method.

 

But you should try to avoid controlling tweens and timelines that are inside of timelines in general. It's best to try and leave the timeline in control of everything. This might be one of those edge cases where it might make sense. Or perhaps this should just be a standalone tween (outside of the timeline) in the first place. Hard to say given the lack of context  

 

 

function part2() {
var tl = new TimelineMax();
const rotateJersey = gsap.from('.jersey', 20, { rotation: 3, transformOrigin:"center top", ease: 'elastic.out( 5, 0.1)', repeat: -1}, "-=0.2")
tl
.to('.sceneTwo_Cont', 0.5, {x: 300, ease:easeInOut2,delay: 1})
.to('.copyFive', 0.5, {x: 300,ease:easeInOut2}, 0)
.add(rotateJersey, "-=0.2")
.to('.copyFive', 0.5,{x: 600, ease:easeInOut2,delay: 1}, 3.9)
.to('.copySix', 0.5, {x: 300, ease:easeInOut2})
.to('.sceneThree_Cont', 0.5, {x: 300, ease:easeInOut2, delay: 2})
.fromTo('.copySeven', 0.5,{x:0}, {x: 224, ease:easeInOut2}, "+=0.2")
.to('.cta', 0.5, {x: 321, ease:easeInOut2})
.to('.cta', 0.2, {scale: 1.05, repeat:1, repeatDelay:0.1, yoyo: true, ease:easeInOut2}, "+=1.5")
return tl;
}

 

Zack, sorry for bothering you again, the .add work fine but the pause doesn't work, something wrong in that piece of code?

[ZachSaucier]

A few comments:

• You're using the old syntax. We highly recommend using the new one  Using the new syntax you can use GSAP's defaults which would save you from having to include the ease every time.
• 0.5 is the default duration so you could leave out including that on the tweens where that's the duration.
• The "-=0.2" on the tween itself won't do anything because it's not directly on a timeline (that's why it's in the .add() instead).
• I see that you added the tween but you never called the pause. You need to do that and it should be something like 

  .call(() => rotateJersey.pause())