Buttons

Components

Transitions

Animations

Loaders

Documentation

Tools

References

Tutorials

Start building websites people remember.

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.

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.

00:35

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.

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.

Scaling Element on Scroll (GSAP Flip)

Scaling Element on Scroll (GSAP Flip)

Copy Email to Clipboard Button

Copy Email to Clipboard Button

Falling 2D Objects (MatterJS)

Falling 2D Objects (MatterJS)

Skeleton Loader Text

Skeleton Loader Text

Scaling Hamburger Navigation

Scaling Hamburger Navigation

Text Scramble (Load, Scroll, Hover)

Text Scramble (Load, Scroll, Hover)

Image Trail Following Cursor

Image Trail Following Cursor

Button with CSS Character Stagger

Button with CSS Character Stagger

Custom Vimeo Player (Advanced)

Custom Vimeo Player (Advanced)

Become a member to view!

We built Osmo to help creative developers work smarter, faster, and better.

Trusted by:

Nicola Romei

Nicola Romei

Jason Harvey

Jason Harvey

Flayks

Flayks

Huy (by Huy)

Huy (by Huy)

Cassie Evans

Cassie Evans

Jesper Landberg

Jesper Landberg

Jordan Gilroy

Jordan Gilroy

Erwin Luijendijk

Erwin Luijendijk

Bimo Tri

Bimo Tri

Dylan Brouwer

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

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

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

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)

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

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

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

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

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

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

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.

A screenshot of the Osmo vault, while Ilja gives a tutorial

Frequent Updates

We are constantly adding
new video content!

Multi Filter Setup

Multi Filter Setup

Flickity Slider Setup (Watch CSS)

Flickity Slider Setup (Watch CSS)

Basic Filter Setup

Basic Filter Setup

Basic Modal Setup

Basic Modal Setup

Live Form Validation (Advanced)

Live Form Validation (Advanced)

Check Section Theme on Scroll

Check Section Theme on Scroll

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

Copy
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;
  });
});

Airplay

Copy

Alert triangle

Copy

Android

Copy

Apple

Copy

Arrow

Copy

Behance

Copy

Bell

Copy

Bitcoin

Copy

Blocked

Copy

BlueSky

Copy

Bluetooth

Copy

Bookmark

Copy

SVG Icons

Did the designer use PNGs again? We’ve got you covered. 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.

NEW

And more is coming...

We’ve packed our best into one platform

Start building websites people can't ignore

B
e
c
o
m
e
a
m
e
m
b
e
r

Portrait of Dennis Snellenberg, Co-Founder of Osmo
Portrait of Ilja van Eck, Co-Founder of Osmo

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.

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.

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.

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.

B
e
c
o
m
e
a
m
e
m
b
e
r

A screenshot of the osmo slack community, prompting users to find a discount code hidden somewhere
Use the code 'YouDeserveThis' for 25% off on your first month!

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.

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

mo
€75 billed quarterly
save 20% on an annual plan

No complicated tiers—just one plan that gives you full access to our Vault. Pay quarterly or save with the yearly option.

€599

lifetime plan
246/250 spots left
next price tier: €750

As a bonus for becoming a Lifetime Member, we will send you a copy of this very website—including animations. ?

Founding Member 100/100 sold out.

As a Lifetime Member, you’ll receive this very website that you’re on—either as a Webflow cloneable or a folder with the HTML, CSS, and JS.

It’s a unique chance to see how Dennis and Ilja structure projects and build award-winning websites. Join our Slack community and share ideas, request resources, and share input directly with us.

As a Lifetime Member, you’ll receive this very website that you’re on—either as a Webflow cloneable or a folder with the HTML, CSS, and JS.
 
It’s a unique chance to see how Dennis and Ilja structure projects and build award-winning websites. Join our Slack community and share ideas, request resources, and share input
directly with us.
 
Founding member: Sold 100/100
Lifetime member 1.0: Sold 250/250

€499

Lifetime MEMBER 1.0
0/250 spots left
LImited to 250 people

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.

Share your student ID through an email, and we’ll give you a deal to access everything Osmo has to offer.

update log

There's currently 68 items in the vault, with the latest addition being 2 days ago. Check back here regularly as we launch new stuff for our members often!

There's currently 45 items in the vault, with the latest addition being 2 days ago. Check back here regularly as we launch new stuff for our members often!

new resource
April 16, 2025

Sticky Title Scroll Effect

category

Scroll Animations

Sticky Title Scroll Effect
new resource
April 14, 2025

Scaling Element on Scroll (GSAP Flip)

category

Scroll Animations

Scaling Element on Scroll (GSAP Flip)
new resource
April 9, 2025

Copy Email to Clipboard Button

category

Buttons

Copy Email to Clipboard Button
new resource
April 7, 2025

Falling 2D Objects (MatterJS)

category

Gimmicks

Falling 2D Objects (MatterJS)
Copied SVG to clipboard
Copied JS to clipboard
close

Submit Help Request

attach_fileAdd up to 5 files

Max 2.0 MB per file. Accepted file types: .csv, .jpg, .jpeg, .pdf, .png, .txt