We Go Again

How it works

A three-column showcase for a creative studio. On the right, a slim frosted strip of tall thumbnails scrolls on its own. In the middle, the featured project: a title, a short paragraph, credits and a large image. Behind everything, the featured image is blown up and blurred into a soft wash of colour that tints the whole screen. Click a thumbnail and the current project leaves in one motion, text sliding up and out line by line while the image shrinks, rises and pushes in, then the new project arrives from below, text rising into place and the image growing up out of the bottom edge and settling.

The motion is GSAP without plugins, plus SplitType to break the paragraph into lines.

Lines behind masks

Every piece of text that animates sits inside its own mask: the title, the credits and each line of the paragraph. The paragraph is split into visual lines at runtime and each line is wrapped in a clipping box, with the text inside it free to move. When the text travels up or down it disappears at the edge of its box instead of fading, which is what gives the transition its printed, editorial feel.

Two phases chained by callbacks

The transition is two halves rather than one long timeline. The outgoing half accelerates away, with a small stagger so the lines leave one after another. The image does two things at once: its frame scales down and moves up, while the photograph inside the frame zooms in, so the picture seems to rush towards you as its window closes. When that half completes, the old details and image are removed from the page, the new ones are built from a data file, the new paragraph is split into lines, and the incoming half runs the same moves mirrored, decelerating into place. The blurred background is handled separately: a new image is slipped underneath the old one and the two crossfade across both halves.

A lock ignores clicks while a transition is running, and clicking the project that is already open does nothing.

Where it gets hard

Splitting text into lines only works once the text has its final width, and the new paragraph must be split after it has been added to the page, otherwise the line breaks are computed for the wrong layout. The other subtlety is the double motion on the image: animating the frame and the photograph inside it in opposite directions is what sells the push-in, and it needs the frame to clip its content.

Performance and mobile

The animated properties are transforms, so the transitions themselves are cheap. The expensive part is visual: a heavy blur over the whole screen and a frosted gallery panel both use backdrop filters, which can be costly on low-end phones; a pre-blurred image is a lighter alternative. Below tablet width the columns stack and the thumbnail strip becomes horizontal, so the same interaction works on touch.