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

[Sara Ree]

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

[ZachSaucier]

Hey Sara. We highly recommend upgrading to GSAP 3 (it's easy to upgrade) but I understand if you don't want to.

 

The issue here has nothing to do with the GSAP version though. You're simply not passing in a function. If you pass in a function it works  

 

To get it to fire only on the repeats where it's at the 0 mark you could use a counter:

See the Pen GRNRvdz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note: I think you'd benefit from my article about animating efficiently. It has tips like leaving out the units which can help you write code more efficiently.

[Sara Ree]

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 ]

[ZachSaucier]

16 minutes ago, Sara Ree said:

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

What do you mean by "reaches" in this case? You mean when the tween first starts? 

 

As it is in the demo that I have, the animation completes, then yoyos (reverses) once, then it fires the code inside of the if statement when it's restarting. 

[Sara Ree]

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

[eballeste_hero]

@ZachSaucier is using a flag the only way to accurately determine which end of the yoyo you are on? it's so weird to me that onRepeat treats both ends of a yoyo effect as individual runs, at first i thought it was a bug.

 

let yoyoBack = false;

gsap.fromTo($el, {
  autoAlpha: 0,
  scale: 0.1,
}, {
  autoAlpha: 1,
  scale: 1,
  duration: 2.4,
  repeat: -1,
  yoyo: true,
  transformOrigin:"50% 50%",
  onRepeat: function() {
    if (yoyoBack) {
      setElPosition($el, pos)
    }

    yoyoBack = !yoyoBack;
  },
});

 

[GreenSock]

Nah, you don't need to use a flag like that. 

gsap.to(".box", {
  ...
  onRepeat() {
    let isYoyo = this.iteration() % 2 === 0;
    console.log("yoyo?", isYoyo);
  }
});

 

See the Pen dyqVJRM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

 

Thanks for being a Club GreenSock member, @eballeste_hero! ?

[eballeste_hero]

@GreenSock sorta, it still requires having to perform that little bit of logic in order to jump over that mental hurdle that onRepeat is being called on both ends of each direction of the yoyo. i thought both directions of the yoyo would be considered a single run.

all good though! `this.iteration` definitely helps. i was just thinking if there was something more accessible that could be included in the docs for other people who might get tripped up by this but it's definitely not a big issue.

thanks a lot for the super fast response ✌️ 

[GreenSock]

Yeah, a valid argument could be made either way - technically a "yoyo" is just a repeat but inverted (direction-wise). Some people would think it's more intuitive to include the yoyo part in what's considered ONE iteration...while others would think it's quite odd if, for example, you've got {duration: 1, repeat: 3} and it takes 4 seconds unless you enable yoyo in which case it suddenly takes 8 seconds (should yoyo affect totalDuration??). So onRepeat fires every 1 second...until you enable yoyo in which case it suddenly drops to running every 2 seconds(?)

 

Anyway, thanks for the input. Glad we landed on a solution that doesn't require a flag/variable to track things. 

[eballeste_hero]

gotcha, i missed the part in the docs where it says that yoyo just repeats the animation in the opposite direction which would make sense why onRepeat is called each time. 

i blame my lack of knowledge and having to re-read the docs multiple times because i miss things the first couple of times but i figured out a way to do this without using either types of internal checks:
 

const setElementAnimation = function() {
  setElPosition($el, pos);
  
  window.gsap.fromTo($el, {
    autoAlpha: 0,
    scale: 0.1,
  }, {
    autoAlpha: 1,
    scale: 1,
    repeat: 1,
    duration: 2.4,
    yoyo: true,
    transformOrigin: 'center',
    onComplete: setElementAnimation,
  });
}
setElementAnimation();