[onRepeat not working when I use it with repeat: -1 and yoyo: true]

Sorry... You're right... Thanks for the answer...

[onRepeat not working when I use it with repeat: -1 and yoyo: true]

Wow thank you Zach. But there is another issue:

The first time when the bar reaches the 100px (reaches the beginning) no call back executes...

[ I want to fire the function each time the bar reaches the beginning to play an SFX audio ]

[onRepeat not working when I use it with repeat: -1 and yoyo: true]

I have this beautiful animation thanks to TweenMax.

 

As you see the width of the bar animates from 100px to 400px and vise versa.

 

I want to track when the bar reaches 100px (the beginning of the animation) so I used onRepeat callback. But as you see it only fires once!!!

 

How can I fix this without ruining the animation?

 

Note: I don't want to switch to GASP because I have wrote a lot of code in TweenMax and I don't want to change all of those.

See the Pen qBqBXXV by pixy-dixy (@pixy-dixy) on CodePen

[Create a simple beating animation]

it shakes a lot... I just used scale not shaking!!!

[Create a simple beating animation]

Hi, I have edited the codepen...  please have a look ...

[Create a simple beating animation]

I'm using TweenMax and I want to create such animation provided in the Codepen.  please note I want a function to start and then stop the animation.

 

the code works fine with one issue : if you play with my Codepen you can see sometimes the pure Css animation jumps back suddenly to the initial position... 

 

I also used such a code like this but it's not soft as the pure Css animation in the code pen please help.

 

const assistantTween = new TimelineMax();
assistantTween.fromTo(icon, 1, {scale: 1}, {scale: 1.1, ease:Elastic.easeOut,repeat:-1});

 

Although this one has not the explained issue this one is very harsh and not soft as you see.

See the Pen ZEprNoL by pixy-dixy (@pixy-dixy) on CodePen

[Reverse one iteration of the animation in the middle of it]

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...

 

[Reverse one iteration of the animation in the middle of it]

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 ...

[Reverse one iteration of the animation in the middle of it]

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 

[Reverse one iteration of the animation in the middle of it]

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();