Timeline repeat+yoyo | I would like to skip some of the steps after the return of the yoyo

[Argi]

Hi! 

I have a problem with the timeline, which I will describe below 
On the attached codepen I would like the animation to work like this:

First start
1. Orange box appears
2. Red box move
3. Orange box disappear
Now the yoyo return and...
4. Do not repeat reversed step 3
5. Move (reversed) red box
6. Do not repeat reversed step 1
And now the loop starts again
7. Go back to 1st step and run like a 1st time

I need this because the 'orange box' will be the text that appears, after which a certain animation is performed and the text disappears.
The 'red box' then returns to its place, and when the animation of the 'orange box' starts to appear, it already has new content in it.

I have tried several ways, but clearly lack experience in GSAP 
Regards, Kamil.

See the Pen OJrXMQQ by kamil-jasiski (@kamil-jasiski) on CodePen

[Carl]

Hi and thanks for the demo.

 

A yoyo is added when you need a repeating timeline to animate forwards and backwards the same way.

 

If you want to do something different in the reverse direction then using yoyo isn't going to be a manageable solution.

 

From looking at the code you provided it looks like it's a bit over-engineered for something that should be a bit simpler.

 

Unfortunately I'm really not following exactly what should happen.

 

In a case like this I would suggest you build a single timeline that ONLY plays forward and clearly shows how everything should appear and disappear. Put all the tweens in the timeline and don't use any function calls or conditional statements to build the animations.

 

At that point we can look at it and see common patterns and then advise you on how some of it can be optimized with functions that return timelines or loops or whatever.

 

While reading your description it kind of reminded me of this lesson from GSAP 3 Beyond the Basics where dynamic content shows and hides throughout a timeline. Perhaps something like this will help

 

See the Pen XWmdPBv by snorkltv (@snorkltv) on CodePen

 

 

[Argi]

@Carl thank you for your help. Sorry I'm only writing back now but I've been busy.
In the end I did as you instructed, which is two separate animations.
 

As for my code, on the other hand, these 'ifs' were more to illustrate what I want to achieve.

Thank you again for your help and best regards ! 😄