[Inherited height change disturbs the expected behaviour of "rotation" with "transformOrigin"]

Ok. It seems that applying the animation to the "<use>" element produces a different result than when applying it to the parent "<svg>". Applying it to the "<svg>" produces the expected result.

[Inherited height change disturbs the expected behaviour of "rotation" with "transformOrigin"]

CodePen should demonstrate the issue I am facing.

 

Clicking on RED should ideally rotate the "+" sign into an "x" sign by applying "rotation":45. However, this rotation must be done alongside changes in inherited height, which, as you can see, totally disturbs the rotation matrix.

 

I am expecting the scale of the icon to change with relative box-position unchanged, i.e. the center of the icon as per transformOrigin property should stay the same relative to the parent box.

 

Any help would be appreciated!

See the Pen apVPdP by IGaMbLeRI (@IGaMbLeRI) on CodePen

[One Timeline.play() triggers another's play()]

Nevermind, a simple .pause() after .progress(0) has solved it. Codepen updated.

[One Timeline.play() triggers another's play()]

As you can see, I am trying to see if Timeline's progress is 0, then I play it and it expands the menu (empty) underneath, if it's 1, then it reverses it and folds the menu. Individually, everything works as intended.

 

However, in order to avoid overlap of menus, I want to close the "other" menu before opening the target one, so I do Timeline.progress(0) to simply reset it to it's folded state.

 

Unfortunately, this causes the timeline to reset to 0, and then to start playing again, which is not expected from the code...

 

What am I doing wrong?

See the Pen XNoQZM by IGaMbLeRI (@IGaMbLeRI) on CodePen