Transitions Between States · A turns into B
Scroll-anchored page flip整页掀起转场
- paper turning
- pivots around you
- depth
Going to the next page, the current one is lifted and turned away from below your line of sight, with a slight rotation as it goes. The new page rises from the bottom. The pivot differs depending on where you were standing on the page.
When to use it
Use it on portfolios, magazines — anywhere “turning a page” describes the move better than “switching”. Avoid it in tools and lists people bounce between; a flip every second is nauseating.
Parameters
total 1.05s · outer transform: translateY −34% · inner counter-translate + rotate −5deg · transform-origin: eye position · ease-in-out
Recipe
Scroll-anchored page flip → 1.05s ease-in-outScroll-anchored page flip → total 1.05s · outer transform: translateY −34% · inner counter-translate + rotate −5deg · transform-origin: eye position
One sentence for your AI
Build a full-page flip transition: take the pivot from the current line of sight (scrollY + viewport height), move the outer layer up by about 34%, and shift the inner layer the opposite way with a −5 degree rotation so the two speeds create depth. The new page rises from 100% to 0. Run the whole thing over 1.05s, slow at both ends.