This GSAP slider adds a spatial 3D feel by curving the slides towards the user, while keeping the overall look clean and minimal. With one simple tweak, the curve can flip away from the user for a more globe-like effect. Scroll down in the preview to see that variation. The gap, curve, perspective, and direction are all easy to tweak with CSS variables for each viewport. ↓ Give Osmo a try (For Free) osmo.supply/try

We’re removing the Lifetime Membership option It’s already been 20 months since we decided to launch with a Lifetime membership option. For a long time, the Lifetime plan was priced at roughly the value of two years of an Osmo Quarterly or Yearly Membership. We did not expect Osmo to become this successful and helpful for so many people. We love working on Osmo full-time and want to keep doing that for many years to come while continuing to bring more and more value to the platform. To make that possible, we also need recurring income after that two year mark. That’s why we’ve decided that we’re going to remove Lifetime forever as a membership option. To give everyone a fair chance to upgrade and lock in for life, we’ll keep the Lifetime option available for another 5 days, until Friday, July 10, 2026 at 23:59 CEST. We don’t want anyone to feel like they have to upgrade. We just wanted to give everyone a fair heads-up before the option disappears forever. Just to make sure nobody is confused, people who already have Lifetime keep Lifetime forever, exactly as promised. Thanks to the 800 people who already locked in for life, and to all the other members who trust us to keep sharing great resources for the years to come. Let’s rock, a lot is coming! 🚀 🔗 osmo.supply/plans

This one got a lot of love in the request tab inside the Slack community, so we decided to build it. A date-picker styled Events Calendar, perfect for hotels and restaurants that want to showcase upcoming events. 👇 Copy + paste it osmo.supply

We’ve all seen those infinite looping Jitter templates on the web. This GSAP powered version lets you use it directly on your site, replace the content with anything you want, and tweak variables like blur, distance, darkness, and card count. Available in Osmo today.

This page transition template reveals the next page through a smooth shutter effect. The number of shutters can be easily set per breakpoint using variable in the JavaScript setup. Available as part of the Osmo Page Transition Course together with 10 other templates! Included for all members. 🔗 osmo.supply/ptc

A lot of people asked how the page transition on @codebydennis’s portfolio website was made. The trick is not to animate rounded corners, but to animate a big half circle. Use the scaleY property together with a transform-origin to create the base of the effect.

If we did our job right, you’ll never see this page. The 404 of our website. Think it’ll ever hit the corner? A little throwback to the DVD era. 🔗 osmo.supply/404

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!

Okay, this is wild. We’ve been named Site of the Year 2025 by @greensock. Big thanks to everyone who voted. Truly means a lot. 🏆 Cheers to many more GSAP-powered resources in 2026 🍻

As we explored different cursor trail ideas we found a neat interaction that adds motion to a section, letting stacked visuals chase your cursor with 🧈 buttery smooth ease. A great way to bring subtle depth into a clean, minimal layout.