Sara Ree

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

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 ]

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.

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

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

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.

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

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

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

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