[Block timeline execution if child tween is infinite]

Hello!
Im trying to create user-controlled complex timeline.
Timeline has step-by-step animations which should be paused after each step and continue only after action from user. While timeline is waiting for action it should show infinite animation which is unique for each step.

I was assuming that infinite animations blocks timeline execution until they will be killed and i can implement this logic using pauses and 'repeat: -1'. Seems like it was right assumption for GSAP 2. But GSAP 3 proceed timeline even if current step is infinite.

Can you please help me understand how can i achieve described behavior using the most elegant and clean solution because timeline will have many steps.

Thanks!

See the Pen QWpepvp by prod_zhuravlev (@prod_zhuravlev) on CodePen

[translation problem after a rotation]

On 1/13/2020 at 8:18 AM, GreenSock said:

That's just an order-of-operation thing. One of the biggest benefits of using GSAP is that you always get consistent order-of-operation with transforms, but you've got an edge case that uses a non-standard ordering of the transforms (you're rotating FIRST and then translating but usually it's the other way around). Trust me - consistent order of operation is a GOOD thing  If you need an explanation as to why, let me know.  

 

There are many ways you could solve this with GSAP. The simplest is probably to just put the element in a container and rotate the container. Another option is to do the math to figure out where the x/y translation would be at that particular rotation and then skip the rotation altogether. Here are both solutions in a forked codepen: 

Hello @GreenSock, im facing the same problem and thank you for detailed explanation.
I was trying to apply same logic to do the math you showed in example for translation, but the problem that im trying to translate both x, y values and can't achieve right behavior (in your example you are showing only translation by y axis).
Perhaps you could help me understand how to do the right math, thank you.

 

 

[GSAP order of transform properties]

@GreenSock
Thank you very much, you read my mind!
This is exactly what I was looking for.
I spent the last day trying to create this function myself, and I'm sure you saved a couple of my next days.
Thanks for the great tool and for the patience in support!

[GSAP order of transform properties]

Thank you for creating such an amazing tool for animation and supporting community.
I have a question about way how Gsap is creating an order of properties for transform while tween/set.

As i understand based on documentation, skew properties come after scale properties (this is exactly what i need),
but when im trying on a practice i see the opposite result where skew is coming before scale properties.
Can you please help me to understand why this happen and how can i change this?
I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set.
Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale.
Thank you so much.

See the Pen MWKEZEa by prod_zhuravlev (@prod_zhuravlev) on CodePen