Dennis Snellenberg

Today I (Dennis, Co-Founder of Osmo) want to share some behind the scenes work on how I go from idea to finished page transition. For this one, I wanted a wave of pixels moving across the screen without fully covering it, so both pages stay visible with a pixel wave as the separator. These are the challenges I solved: 1. My first step was stacking both pages and hiding one with a clip-path animation. I used the GSAP steps(12) function to create a stop motion feel linked to the number of pixels per row instead of a smooth transition. 2. Creating 100+ pixel elements by hand was not an option, so I built a helper that duplicates [data-transition-col] and [data-transition-pixel] based on a variable, in my example 12. It calculates how many pixels are needed to fill the screen. Before every transition run it checks the screen size so no resize listener is needed. 3. I started with a simple function animating pixels to opacity 1 randomly and back to 0. This is common, but I wanted to push it into a real wave effect. 4. The hardest part was syncing the clip-path steps with pixels fading randomly from 0 to 1. After lots of iteration I got a version that follows the clip-path edge perfectly. Keeping one line filled hides the page edge. 5. GSAP offers many stagger options. Random does exactly what you expect. Start/end controls direction, in my case per column top to bottom. I also tested center and edges for triangle shapes. Cool, but not the look I wanted. 6. After hours of tweaking and experimenting I nailed the timings, extra pixels, and the key behavior: pixels start first, then the clip-path begins when the wave reaches the edge, pauses, and lets some pixels continue. Everything is controlled with a few tweakable values: const pixelHorizontalAmount = 12; const transitionDuration = 1; const pixelFadeDuration = 0.2; const pixelOverlap = 0.3; Now you are going to ask: what are the last two doing? Pixel Fade Duration: controls how long a column fills. Increasing it makes the spacing feel larger. Pixel Overlap: controls how much pixels fade together, creating softer layered transparency instead of hard flashes. 7. Improving it for portrait devices Portrait screens felt too busy with 12 columns, so instead of complex breakpoints the animation switches direction automatically from left to right to top to bottom. Same values, cleaner result. Time insights 🕓 • 4 hours for the helper function and clip-path • 4 hours tweaking the animation • 2 hours to create this post and video Boilerplate ✨ I used the Osmo Supply boilerplate for the page transition setup. We also have a full Barba.js course showing how to build a One Page Application style site where current and next pages stay visible for transitions like this. This template will be available on Osmo Supply next Monday, so stay tuned. And that’s it! 👋 Hopefully you enjoyed a breakdown like this. If you did, please give this post a like so maybe I make another breakdown!

We’re excited to share the first 5 page transition templates, as a first preview of what’s coming with the Page Transition Course next month (with plenty more templates to come after launch). They’re ready to drop into your project, just like all Osmo resources.