If we reparent the blue div into a new rotated & scaled container (altering the DOM structure), how could we animate there seamlessly? Use the "FLIP" animation technique! Press the right arrow to begin.

"First": Get the initial state.
const state = Flip.getState(targets)

"Last": Put elements in their final state. In this case we'll place the element in the new container <div> which results in a totally different position, scale, and rotation.

"Invert": Make the element appear in its previous position/size by applying offsets instantly. That way, it looks like it hasn't moved yet. Note: we animate this step in the demo to illustrate what normally happens immediately.

"Play": Animate the removal of those offsets.
Flip.from(state, options) returns a GSAP timeline so you can add other animations, control it, etc.

GSAP's Flip Plugin makes this a breeze!