Osmo

This week is special—it’s our first collaborative resource! The idea for this week’s 'Gallery to Overlay Transition' comes from Stephanie Bruce, who reached out to us with this design and animation concept. It was a perfect opportunity to dive into GSAP's Flip Plugin, and share it as a free resource. Don't forget to follow Stephanie—her work is incredible, and she’s one to watch. 👀 To access a Webflow cloneable and CodePen project, sign up for the waitlist on our site: https://www.osmo.supply

We love seeing the amazing things people create with Osmo resources! Niice used our recently shared navigation in their latest project. 🔥 Check it out: color-monkey.com

We are working hard on building a dashboard environment for Osmo where all resources will be documented. This is a screen recording, so everything you see is created in Webflow. Our goal is to launch January 2025 (no promises). Stay tuned! Join the waitlist → https://osmo.supply

Page transitions are a key factor for creating seamless experiences, and they’re one of our most popular requests. While we use BarbaJS for client work, this week we’re sharing a simpler setup using JavaScript and GSAP for anyone looking to start relatively simple. We do promise, in the future, we will teach you everything we know about page transitions with BarbaJS. Get access to a Webflow cloneable and CodeSandbox link of this project by signing up four our waitlist: https://www.osmo.supply

More than 5000 of you have entered the waitlist already. We just wanted to take a moment and share our appreciation for all of the support so far 🖤

Interactions and animations might steal the spotlight, but seamless scaling is what makes a website truly polished. It ensures your designs work beautifully across all devices—without the endless tweaking. This week, we’re sharing the Osmo Scaling System—our go-to approach for scaling websites across devices while maintaining full control. Want to receive this free resource? Join the waitlist → https://osmo.supply

Always looking for a great way to build a custom slider? This week's free resource is one we built with GSAP! It has arrow controls, drag support, and you can click a slide to navigate to it. Since it's fully GSAP based, you'll have complete control over all the easing and durations. Of course we also couldn't resist making a fun little hover interaction for the slider navigation ✨ Sign up for the waitlist on our website to get a Webflow cloneable and CodePen link in your inbox! → https://www.osmo.supply

Happy Monday! This week's free resource is our approach to building a Custom Menu with GSAP. As a little bonus we added some smooth hover interactions in the menu itself as well. One tip: simply calling .reverse() on your timeline is not the way you want to go 🤓 Sign up for the waitlist to get this, and a new freebie in your inbox, every single week until we launch. Every resource comes as a Webflow cloneable, and a CodePen link! → https://www.osmo.supply

After receiving great feedback on the initial designs for the Osmo dashboard, called 'The Vault', we’re excited to share a first look at the progress we’ve made in developing the interface. Naturally, as designers, we couldn’t launch our own product without including a dark/light mode switch! Join the waitlist → https://osmo.supply

Another Monday, another Free Resource! This week we're sharing Nr.005, our setup for a Dynamic Custom Cursor with text inside. The core of everything is a GSAP.quickTo() function tied to the mouse position. For granular control of the cursor text per separate button or link, we use attributes.   We've also added 'Edge Awareness'. Meaning that if you're hovering a button or link somewhere on the right 20% side of your screen, the cursor bubble will move to the left. This way it won't overflow, and you're still able to read it. Want to receive this free resource? Join the waitlist → https://osmo.supply