Buttons
Components
Transitions
Animations
Loaders
Documentation
Tools
References
Tutorials
Start building websites people remember.
Osmo came from constantly digging through old projects wondering, ‘How did I build that again?’ It is basically our personal toolbox, packed with components, techniques, tricks and tutorials—and it will keep growing.
The platform we wish we had, so we built it for you
Built by two award-winning creative developers, our vault gives you access to the techniques, components, code, and tools behind our projects. Build, tweak, and make them your own.
Social Icons
Ilja van Eck
Custom Vimeo Player (Advanced)
Marquee with Scroll Direction
Magnetic Hover Effect
Emoji Rain Effect
Directional Button Hover
Number Loader in 3 Steps
Draggable Infinite Slider with GSAP
Apple Dock Navigation Bar
Looping Words with Selector
We built Osmo to help creative developers work smarter, faster, and better.
Trusted by:
Nicola Romei
Jason Harvey
Flayks
Huy (by Huy)
Cassie Evans
Jesper Landberg
Jordan Gilroy
Erwin Luijendijk
Bimo Tri
Dylan Brouwer
Osmo combines high-quality resources with intuitive guides, making the process of designing standout websites faster and easier, helping creatives to achieve great results in less time.
Nicola Romei
Digital Designer
Osmo is full of awesome (and easy to use) interactions that save so much time. They’re visually powerful but also robust, and the best thing is, it’s only going to get better as more even resources get added! Oh and it doesn’t hurt that the dashboard looks sick too.
Jason Harvey
Somefolk
It's nice to get access to some creative dev best kept secrets - they're a great a source of inspiration for animations and interactions. Already found out some tricks for some issues that were giving me headaches before! Love how it explains the implementation rather than blindly copy-pasting it, making it much easier to customize.
Flayks
Designer & Front end Dev
One of a kind platform for any developers out there. It's incredible to be able to see and learn how the pros implement their animations. If you love web animations and creative development, this platform this a no brainer—just sign up already.
Huy (by Huy)
Web Designer & Youtube creator
Even if you know GSAP, it can be tricky to apply abstract animation concepts to real-world scenarios. Dennis and Ilja have come to the rescue with this treasure-trove of useful techniques. There’s something for everyone here, grab-and-go or use the code as a jumping off point. This gets the official GSAP stamp of approval.
Cassie Evans
Developer Education - GSAP
Osmo Supply is a gem for clever and well-thought-out code/no-code solutions for animations and components. "Even I" came across a few neat tricks I hadn’t seen before. It’s a resource both beginners and seasoned pros will find incredibly useful. Lama stamp of approval on this one, and I’ll deffo be coming back to it!
Jesper Landberg
Creative Developer
The creative developer's cheat code. Osmo is a one-stop shop, offering everything from snippets to help you set up your site to advanced animations and interactions that elevate it to the next level. The resources are so easy to implement, and with some imagination, you can adapt them to create something unique.
Jordan Gilroy
Web Designer
The Osmo Vault is a must-have for freelancers and agencies. It saves you a tremendous amount of time, delivers exceptional quality, and enhances creativity in your projects.
Erwin Luijendijk
Cut the Code
Flawless UI—detailed, easy to implement, and straight-up reliable. The code is clean, well-explained, and ready to drop into Webflow without a hitch. You can tell it’s built by pros. Love it and definitely using this on most of my projects. Osmo is the real deal.
Bimo Tri
Webflow Developer
Osmo is my new go-to resource for the best Webflow cloneables and code snippets. It saves me a lot of time and elevates my workflow. The scaling system, in particular, is a game-changer—it’s exactly what I was missing and is now my fluid scaling solution for every project.
Dylan Brouwer
Digital Designer & No-Code Dev
The creative toolkit behind award-winning websites
Ready-to-use Components
Let’s be real—rebuilding a slider (or any core component) from scratch for every project is just annoying. We’ve set up clean, customizable structures, built with best practices, so you can skip the boring setup and jump straight to the fun stuff. Secretly, we might have made this mainly for ourselves too...
Educational Content
Drag-and-drop tools might get you a quick animation, but if we're realistic—that won’t win awards. We want you to actually understand what you’re doing, how it works, and how to nail it yourself next time. Learn the principles, build the skills, and take control of your projects.
Frequent Updates
We are constantly adding
new video content!
Basic Modal Setup
Live Form Validation (Advanced)
Check Section Theme on Scroll
Detect Scrolling Direction (Up/Down)
Lenis Scroll-To Anchor Target
Lenis Smooth Scroll Setup
Osmo Basics
Discover the core functionalities and techniques that form the backbone of many websites. These are the foundations you’ll rely on for every award-worthy project. Master the basics, and the flashy stuff will actually have something solid to stand on.
Code Snippets
Not sure about you, but we find ourselves going back to old projects all the time to quickly copy that snippet we used before. So we decided to keep track of them from now on. Try the below snippet in your project, it’s on the house.
Javascript
document.addEventListener("DOMContentLoaded", () => {
// Dynamic update current year
const currentYear = new Date().getFullYear();
const currentYearElements = document.querySelectorAll('[data-current-year]');
currentYearElements.forEach(currentYearElement => {
currentYearElement.textContent = currentYear;
});
});SVG Icons
Did the designer use PNGs again? We’ve got you covered. Social icons are a must for almost every website, but finding them in the right SVG format can be a pain. That’s why we’ve made it simple: clean, scalable icons you can copy or download in seconds.
And more is coming...
We’ve packed our best into one platform
Start building websites people can't ignore
Explore the perks of being a member
Explore the Vault
The Vault is where everything lives. Organized into clear categories , it’s designed to make browsing easy. Whether you’re looking for a specific slider, animation, or utility, our quick-find search has you covered. With fuzzy search that catches typos, you’ll get exactly what you need. Fast, organized, and ready to explore.
Detail pages you’ll love, we hope
Every asset comes with clear documentation, clean code, and comments where needed—designed for both Webflow and non-Webflow users. We even remember your preference, so you’ll always see the approach that works best for you, first. We also include videos that explain the concept, go deeper on the subject, or maybe might spark some new ideas.
Yeah we know it's a buzzword
The word ‘community’ gets thrown around a lot these days, but we genuinely believe it’s the best way to connect with other creators. Whether it’s solving tricky problems together, sharing ideas, or just finding people who get what you’re trying to build, this is where those connections happen. We're on Slack, so no need to go to some dedicated tool online that you'll forget about.
Become a member
One plan, constant updates.
Unlock the full vault of resources and join our Slack community, where fellow creative come together to share insights, feedback, and ideas. Join us today and lock in your price for as long as you stay with us—no unexpected hikes, ever.
€25
€20
No complicated tiers—just one plan that gives you full access to our Vault. Pay quarterly or save with the yearly option.
€499
As a bonus for becoming a Lifetime Member, we will send you a copy of this very website—including animations. ?
€360
Student discounts,
because we’ve been there.
Share your student ID through an email, and we’ll give you a deal to access everything Osmo has to offer.