Page Transition Course
We’re currently in the midst of developing this! If you want to be the first to know when it launches, make sure to leave your email below.
Get the latest
updates
Page transitions are the detail that separates good work from work people talk about. They shape how a site feels, guide the story, and turn simple pages into a branded experience. This course gives you the system to build them with confidence.
Why transitions matter
Thoughtful motion changes perception. It connects pages into a story, and creates the kind of polish clients and your peers notice. The stuff that sets you apart from all the AI shit in our industry.
Learn the system behind the magic
We teach structure, timing, and motion logic so every movement feels intentional, not random. Once you learn the system, you can reuse it on any project.
Built for production
This setup runs on real sites. Clean routing, scroll behavior that behaves, performance in mind, and patterns that are safe to ship.
Fits your workflow
Copy the boilerplate into your project or use one of the included transition templates. Everything’s built to plug straight into Webflow or any custom setup, so you can skip the boring work and focus on the fun part.
Chapters
Our Page Transition course is split into 6 key chapters, giving you all the knowledge you need to create killer transitions.
Built from everything we’ve learned across 35 Site of the Day winning projects. This is the workflow, structure, and motion logic that shaped how we build. Now it’s yours to learn.
The complete boilerplate
This isn’t a demo setup. It’s the same boilerplate we now start our client projects with. It gives you a clean starting point and the same foundation we rely on to build websites that stand out.
A system that makes sense
Learn how every part connects, and why. Once you understand how the pieces talk to each other, you’ll be able to create transitions that feel natural, intentional, and completely your own.
The same setup we used to create these award-winning page transitions...
Everything you see here runs on the same foundation we teach. Once you understand the system, this level of work starts feeling within reach.
By Dennis
and Ilja
How do you want to get started?
Join 1.4K+ others
Got questions?
We’ve got answers.
We even answered
without ChatGPT ;)
When will the course launch?
We’re aiming for late 2025. The course is in production now, and we’ll announce updates in our Slack and newsletter. So if you want to stay in the loop, make sure to leave your details in the signup form.
What is BarbaJS?
Barba.js is a lightweight JavaScript library that helps you create fluid and smooth transitions between your website’s pages. It makes your website run like a SPA(Single Page Application) and help reduce the delay between your pages, minimize browser HTTP requests and enhance your user’s web experience.
It achieves this by dynamically updating page content, allowing us to customize transitions with CSS or JS (We use GSAP) while the pages are switching.
As an Osmo Member, can I access the course?
Yes. Every member gets full access to the course for free. If you’re not a member, you’ll be able to purchase it separately as a one-time payment.
Besides the video content, will you offer templates?
Yes. The course includes ready-to-use transition templates and the full Osmo Barba Boilerplate. You can start from scratch or use the boilerplate to speed things up.
Is there any support for students?
Yep. Students get a 30% discount. Just share a valid student ID and we’ll send you a personal discount code.
What is the price of the course?
€199 as a one-time payment. Free for all Osmo members.
Do I need JavaScript knowledge to take this course?
Some basic understanding helps. We cover setup and fundamentals, but this isn’t a beginner course. You’ll get the most out of it if you already know your way around basic JavaScript and GSAP. We won’t be explaining what a variable is.
If you’re newer to code but motivated to learn, you’ll still be fine. Tools like ChatGPT and Claude are great for quick questions while following along, and our Slack community is always open for discussion, feedback, and peer support.
Does BarbaJS break SEO or loading speed?
No, it doesn’t. BarbaJS automatically updates the document title as you navigate, so search engines still see the correct pages and metadata. Your site will be crawled normally, and there’s no need to manually update meta descriptions or keywords.
It simply intercepts your link clicks and swaps the page content. When implemented properly, performance stays identical to a regular site load.
Will this course cover troubleshooting and debugging?
Yes. We show how to catch errors in transitions, handle timing issues between Barba and GSAP, and structure your code to stay maintainable as projects grow.
Who is Osmo made for?
Osmo is made for designers and developers who care about detail, the ones who love smooth interactions, creative layouts, and sites that stand out.
It’s built for creative web developers who want to enhance their skills, streamline their workflow, and create award-worthy projects. Whether you’re freelancing, part of an agency, or working on personal projects, Osmo has something for you.
Are you Webflow exclusive, or do you give the HTML/CSS as well?
We’re not Webflow exclusive. Every resource in Osmo comes with full HTML/CSS & JS documentation, so you can easily adapt it to your workflow. Osmo is built for creative developers, whether you use Webflow, write code from scratch, or work somewhere in between.
Who is behind Osmo?
Osmo was created by Dennis Snellenberg and Ilja van Eck.
Based in the Netherlands and Belgium, we’ve combined our experience from years of building high-end websites and over 35 Awwwards “Site of the Day” wins into a platform that helps others create interactive, animated, one-of-a-kind projects.
How often do you add new content?
We update Osmo very regularly. You can always check our Updates page to see everything we’ve added recently. New components, resources, and improvements are rolled out consistently to keep things fresh.
Can I suggest a resource for Osmo to create?
Absolutely. We love hearing ideas from our community! That’s why we highly recommend joining our Slack Community. It’s a global space for designers and creative developers, with dedicated channels for feedback, discussions, and submitting new resource ideas.
Is there a free trial or demo version I can explore first?
Yes!
We have a free demo that currently includes 16 resources from the Vault. You can explore them right away and get a feel for how Osmo works. Sign up here to try it out.
Can I still use the resources when I cancel my membership?
Yes. When you cancel, you keep access until the end of your current billing period. After that, your vault access stops, but anything you already used in shipped projects is fine to keep using. Redistribution or reselling is not allowed.
Do you have a team, studio or agency plan?
We do indeed! Head to the pricing page, and use the toggle above the pricing cards to switch to the team plan.
Is there a refund policy for purchases?
Yes, we offer refunds under certain conditions. If you’re unsatisfied or have an issue with a purchase, reach out to us, and we’ll work with you to find a resolution.
Can I change my plan later?
Yes, you can switch between quarterly and yearly billing options at any time through your account settings in the dashboard. If you decide to upgrade to the lifetime plan, the price will reflect the current offering at the time of your upgrade.
How can I contact support if I have an issue?
Email us or reach out in Slack. We’re active and try to help quickly, and the community is great for troubleshooting too. If you run into a bug, there's usually lots of people ready to help out.
Can I share my Osmo account with my co-worker or friend?
No, not unless you’re on a team account. Regular Osmo accounts are single-user.
If we suspect account sharing or other misuse, we reserve the right to temporarily disable access until the situation is cleared up.
