Child timelines don't yoyo

[mtkramer 0 Likes (Newbie)]

 Hello,

 

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

[Dipscom 2,815 Likes (Superhero)]

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.

[mtkramer 0 Likes (Newbie)]

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

[mtkramer 0 Likes (Newbie)]

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

[mikel 1,823 Likes (Superhero)]

Hi @mtkramer,

 

Look in the docs: yoyo 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

Mikel

[mtkramer 0 Likes (Newbie)]

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!