FLIP Page Transition Lab: Transform Timeline (2D)

This is the 2D-native counterpart to the 3D FLIP page-transition lab. Every polished page transition on the web — the thumbnail that grows into a full hero image, the card that expands into a detail view — runs on the same trick: FLIP (First, Last, Invert, Play). Instead of orbiting a rendered 3D scene, this simulator draws the quantities that actually generate the physics: a top-down stage showing the two page layouts and the shared "hero" block sliding, fading or scaling past each other; a live numeric/graphical readout of the FLIP transform's own inverted Δx, Δy, sx and sy as they decay toward identity; and a scrubbable easing-curve timeline that plots linear, cubic ease-in-out and damped-spring release side by side with the current progress marked live. Pick an easing curve and a transition style, tune duration and exit/enter overlap, then either press Play or drag the timeline yourself to inspect any instant of the transition frame by frame.