Jump to content


Child timelines don't yoyo

Moderator Tag

Recommended Posts



I've been stuck on this problem for a few days now.  I have two timelines.  Each move dozens of paths that all begin absolutely at 0 seconds and end simultaneously at .35 sec (the duration) and then the timelines are supposed to yoyo.  To simplify and reuse code, I put each in their own callable functions vertAni() and horiAni().


My next step is to create a parent animation in a callable function which pushes these two animations together by alternation and the length of the timeline is based on a user defined input (rep).  I accomplished this by:


See the Pen byEJqX?editors=0010 by mtkramer (@mtkramer) on CodePen


It works well when called with the added .3 sec delay due to the absolute staggering, but the animations don't yoyo back to their own beginnings, they animate tween each other's endpoints.  Anybody know a correction or a different approach I could try?

See the Pen byEJqX by mtkramer (@mtkramer) on CodePen

Link to comment
Share on other sites

Hello @mtkramer,


Welcome to the forums!


It's very hard to troubleshoot blind. There could be a ton of variables we are not aware of.


Are these two timelines animating the same set of paths? If yes, are the timelines overlaping?


It really would help if you could produce a reduced case demo to showcase your issue, right now, we'll be guessing here.


And my guess is that you are animating the same bunch of paths, offseting the timelines by 0.3 second but the timeline is actually 0.7 seconds (0.35 times 2) and because of that, the resulting overlapped animation is not what you were expecting.

  • Like 1
Link to comment
Share on other sites

Ok, created a pen and edited the original post.  Thankfully and unfortunately, it has the same problem as in my IDE.

Link to comment
Share on other sites

With some more testing, I think there may be a rendering issue with the animation being played through React.  I simplified it to just run the vertical animation on mounting and still no yoyo.


It seems that this is a common problem.  People have found work-arounds using GSAP as a plugin to scroll magic.


I was also considering just hard-coding the yoyo into the child timelines, but I'd rather not :P

Link to comment
Share on other sites

Hi @mtkramer,


Look in the docsyoyo works only in conjunction with repeat


To get back to the starting position, set your repCount(count); to an even number.


See the Pen pmyWxa by mikeK (@mikeK) on CodePen


Kind regards


  • Like 3
  • Thanks 1
Link to comment
Share on other sites

As usual, I assumed I knew what yoyo did and looked everywhere else in the docs.  Adding repeat to the child timelines fixed the issue.  Thanks Mikel!

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.