Jump to content
Search Community

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

Sara Ree test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 2 years later...

@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;
  },
});

 

Link to comment
Share on other sites

@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 ✌️ 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...