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). This simulator renders two page layouts in 3D, complete with a shared "hero" block that lives in a different position and size on each page. Trigger the transition and watch the outgoing and incoming pages slide, fade or scale past each other while the hero element is instantly inverted to match its start rect and then eased back to identity — the exact sequence a browser runs under the hood. Pick between a linear curve, a cubic ease-in-out, or a physically simulated damped-spring release, tune the duration and how much the exit and enter animations overlap, and read the live elapsed time, progress and eased value driving the transform every frame.