Reverse one iteration of the animation in the middle of it

[Sara Ree 0 Likes (Newbie)]

I have button 1 that initiates the pulsating animation  like this:

 

//Global variables
let tween = new TimelineMax();

// button 1 code

//First of all select the element
  let item = $('[aria-label="speak"] svg')

// Start the infinite pulsating animation
  tween.to(item, 1, {scale: 1.1, ease:Elastic.easeOut, repeat:-1, repeatDelay:0.2})

So far so good, BUT...

What if we have a second button (button 2) that reverses the iteration Not the whole timeline! I want the second button to instantly animate the pulsating element to its initial state without any jumping or jerking moment.

I'm not bound to the code above any pulsating animation is accepted.

 

Let me clear this out: 

I have used this code but it just reversed the whole timeline to the beginning ... I want it to instantly go back (With the same animation) to initial state :

   // button 2

   tween.reverse();

 

[ZachSaucier 7,123 Likes (Superhero)]

Hey Sara and welcome to the GreenSock forums!

 

A few notes: 

• It's probably best to name your timeline something like timeline or tl - naming it tween might be confusing to others looking at your code.
• You don't need to use jQuery or even use a variable for the target. Just pass the selector string into the tween like so: .to('[aria-label="speak"] svg', {...
• To instantly set the tween back to its start point there are several ways. .progress(0) is a good way if you don't want it to play from the start. .restart() or .play(0) are good if you want it to restart from the beginning.
• We recommend using GSAP 3 - it has a lot of improvements and an even simpler API! 

Let us know if you have any other questions! Happy tweening.

[Sara Ree 0 Likes (Newbie)]

Thanks for the instant replay... but unfortunately`tween.progress(0)` doesn't do anything and the animation continue ...

 

and adding this:

tween.progress(0); 
tween.pause();

jumps to the start without any animations....

 

I want something like reverse(); of course not for the whole timeline but for one iteration 

[GreenSock 18,228 Likes (Superhero)]

I'm not sure I understand your goal, but perhaps this is what you're looking for?:

// don't keep animating forward
tween.pause();

// tween the playhead back to the start
TweenMax.to(tween, tween.time(), {time:0, ease: Linear.easeNone});

Does that help? 

 

Like @ZachSaucier said, I'd recommend upgrading to GSAP 3 when you have a chance. It'd be all the same concepts - nothing drastic changes. Here's a one-liner for GSAP 3:

// GSAP 3 version:
gsap.to(tween.pause(), {duration: tween.time(), time: 0, ease: "none"});

Happy tweening!

[Sara Ree 0 Likes (Newbie)]

I have done it like this:

 

function Script1()
{
  // button 1
  let item = $('[aria-label="speak"] svg')
  tween = new TimelineMax();

  tween.fromTo(item, 1, {scale: 1, ease:Elastic.easeOut, repeat:-1}, {scale: 1.1, ease:Elastic.easeOut,repeat:-1}, {scale: 1.1, ease:Elastic.easeOut,repeat:-1});

}

function Script2()
{
  // button 2
  tween.reverse(0.4);
}

And I can't use GSAP 3: because it has different  and unexpected behavior for one one my animations... maybe a bug or something ...

[GreenSock 18,228 Likes (Superhero)]

@Sara Ree that code isn't valid - you have too many vars objects in that fromTo() (there should only be two - the first is the "from", the second is the "to"). And you only need to define the ease and repeat in the "to" part. 
 

// BAD
tween.fromTo(item, 1, {scale: 1, ease:Elastic.easeOut, repeat:-1}, {scale: 1.1, ease:Elastic.easeOut,repeat:-1}, {scale: 1.1, ease:Elastic.easeOut,repeat:-1});

// GOOD
tween.fromTo(item, 1, {scale: 1}, {scale: 1.1, ease:Elastic.easeOut,repeat:-1});

 

Also, I thought you said you didn't want to use reverse() because it would go backward through all the iterations up to that point, right? The solution I provided would only go back to the start of the current iteration. Did I misunderstand your goal? 

 

17 minutes ago, Sara Ree said:

I can't use GSAP 3: because it has different  and unexpected behavior for one one my animations... maybe a bug or something ...

Hm, I'm not aware of any bugs but I'd definitely like to see what you're talking about. We're committed to fixing any bugs of course. But I wonder if it may just be a misunderstanding on your part in how GSAP 3 works, and/or there might be a super easy fix. Got a reduced test case? Perhaps in codepen?

[Sara Ree 0 Likes (Newbie)]

Thanks for the clarification  I have updated my code to : tween.fromTo(item, 1, {scale: 1}, {scale: 1.1, ease:Elastic.easeOut,repeat:-1});

 

The tween.reverse(0.4); does exactly what I want instead of tween.reverse(); that would go backward through all the iterations up to the start point.

 

I'll provide a codepen to show you what I mean about GSAP 3 bug as soon as possible...