I'ts the rotation this is the code I use each click the timeline reinstantiate. If essential I could make a pen to reproduce
const tl = new TimelineLite()
tl.set(this.envTop, { transformOrigin: '50% 50%' })
.set(this.envBottom, { transformOrigin: '50% 50%' })
if (!checkedTwo && two) {
tl.to(this.envTop, 0.5, { morphSVG: this.crossTopPath, rotation: 360 }, 0)
.to(this.envBottom, 0.5, { morphSVG: this.crossBottomPath, rotation: 360 }, '-=0.5')
.to(this.envLeft, 0.5, { x: -300 }, '-=0.5')
.to(this.envRight, 0.5, { x: 300 }, '-=0.5')
} else if (checkedTwo) {
tl.to(this.envTop, 0.5, { morphSVG: this.envTopPath, rotation: 0 }, 0)
.to(this.envBottom, 0.5, { morphSVG: this.envBottomPath, rotation: 0 }, '-=0.5')
.to(this.envLeft, 0.5, { x: 0 }, '-=0.5')
.to(this.envRight, 0.5, { x: 0 }, '-=0.5')
}
I also did a play reverse without reinstatiating the timeline but that also gave wrong positioning after clicking fastly on the button.