Osmo

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

Free resource Nr.004 features a?Parallax Image Layers?effect, an idea Dennis first experimented with in 2018 to shake up the Dribbble community. He even dedicated a full website collection to this effect, titled?Project Parallax. ? We use a script in combination with GSAP to move the layers at different speeds to create the parallax effect. To keep the effect lightweight and simple, we used three image layers—but the more, the better! Want to receive this free resource? Join the waitlist → https://osmo.supply

Learn how to create a magnifying hover effect in Webflow using custom CSS. We published this as a free resource earlier this week, using a JavaScript approach, so in this video, Ilja shows to create the same effect using CSS only. Want to get access to weekly free resources until we launch early 2025? Make sure to subscribe to our waitlist on https://www.osmo.supply

First look at Osmo! ?? We're excited to finally give a little preview of the Osmo dashboard we've been building. This is where you’ll explore resources, watch tutorials, and save your favorites. We’re keeping things simple and functional, but there are a lot of small tweaks and features we’re planning to add for a smooth UX—think tooltips, keyboard shortcuts, and a very comprehensive search modal. We are still in the early stages of the design phase, so we’d love to hear what you think. What features are you missing on platforms like this? Any suggestions, comments, or just general thoughts? Or go ahead and completely roast us. More updates coming in the next few weeks!

?? Site of the Week - Osmo Not just a beautiful site - a place to level up your skills as a creative developer. Love to see knowledge being shared by the experts in this field. Interested to see this evolve. By: Dennis Snellenberg & Ilja van Eck ?? SplitText Flip ??? Three.js Webflow site → https://www.osmo.supply/ showcase → gsap.com/showcase

Thank you for the shout-out Ran! We’d love for you to try our platform when we launch early 2025.

It’s Monday, so that means we’re back with another free resource! This time we’ve created the Apple navigation dock. If you’re a macOS user, you probably use this all day, every day, without thinking too much about it. But did you ever consider making something like this your website nav? bram naus did, for whom Ilja originally built this. There’s many different approaches to making this, we decided to simply toggle some classes on the element you hover, and the elements surrounding it. Keep an eye on YouTube this week, we’ll share a video that goes much more in-depth. Want to receive this free resource? Join the waitlist → https://osmo.supply

The great thing about online resources, cloneables, and templates is that they don’t have to be used exactly as they’re shared. They’re really a starting point, giving you a base structure to build on and make your own. For example, we shared a free resource recently—a pixelated image reveal effect. Maybe this exact pixel effect doesn’t match your site’s style, but you still want a hover effect somewhere. Ilja just dropped a YouTube video showing how he transformed that same effect into something different, while still using the original structure as a base. It’s all about making these tools fit your project. Check the full video on YouTube for an in-depth walkthrough: https://lnkd.in/eC7iQruj