Wipe Slider

The whole thing is built around one idea: every visible piece has to agree on which direction you're going. When you press next, the background clips open starting from the right edge and sweeps left, the outgoing title characters lift up and off in the same direction, and the incoming ones rise in from below on a slight delay so they never collide with the exit. Pressing prev mirrors every single one of those directions. If even one piece animates direction-agnostic, the whole transition reads as broken, even though nothing is technically wrong with it.

The background wipe itself never animates a clip-path string directly - browsers collapse inset() shorthand the moment two sides match, and GSAP can't interpolate a collapsed value against an expanded one, so the mask just freezes and then snaps at the end. Instead the CSS holds a static inset() template that reads two custom properties, one per side, and the tween only ever touches those numbers. The image inside gets the same treatment on scale, going from a slight 1.1x zoom down to 1 as the wipe finishes, so the reveal always feels like it's settling into focus rather than just appearing.

Nothing here is scroll-driven on purpose. This is meant to sit as the very first thing on a page, so it responds only to what the visitor actually does: click an arrow, tap the keyboard, or swipe. An isAnimating flag blocks a second transition from starting mid-wipe, which matters more than it sounds like it should - a slider that queues up three rapid clicks and plays them back-to-back never looks controlled.