Curated archive of 20 design references, UI interactions, and animations published by Osmo on X.
A dark 3D carousel of photo cards floats in space, creating a sleek... - Osmo
A dark 3D carousel of photo cards floats in space, creating a sleek interactive gallery presentation.
@osmosupplyMeet the Draw SVG Page Transition Template. It animates an <svg> pa... - Osmo
Meet the Draw SVG Page Transition Template. It animates an <svg> path with a smooth draw effect, then wipes it away to reveal the next page. Replace the path with your own and exp...
@osmosupplyToday featured in the Osmo Showcase: MoMoney, using 10 Osmo Resourc... - Osmo
Today featured in the Osmo Showcase: MoMoney, using 10 Osmo Resources. Created by @JordanGilroy. Here’s what they used: 1. Pixelated Page Transition 2. Emoji Rain Effect 3. Live F...
@osmosupplyA testimonial slider with smooth, staggered text reveals. Lines mov... - Osmo
A testimonial slider with smooth, staggered text reveals. Lines move in and out while an image unveils through an expanding circular mask. Available now in our Vault
@osmosupplyToday featured in the Osmo Showcase: BG Monheim, using 4 Osmo Resou... - Osmo
Today featured in the Osmo Showcase: BG Monheim, using 4 Osmo Resources. Created by Michael Aust. Here’s what he used: 1. Multilevel Navigation 2. Marquee with Scroll Direction 3....
@osmosupplyToday we’re adding a smooth Loading Animation to the Vault. Tiles s... - Osmo
Today we’re adding a smooth Loading Animation to the Vault. Tiles slide in horizontally with a staggered ease that locks everything together nicely. You get the raw GSAP timeline...
@osmosupplyIf this flew past you, you’re probably hiding under a rock. @itsoff... - Osmo
If this flew past you, you’re probably hiding under a rock. @itsoffbrand used our Marquee with Scroll Direction on the new Lando Norris site. Micro animations everywhere. Pure joy...
@osmosupplyTrying something new in our Vault! @hiunicornstudio is a visual Web... - Osmo
Trying something new in our Vault! @hiunicornstudio is a visual WebGL editor, and the same tool we used for the hero background on our previous website (the black/orange gradient...
@osmosupplyOur most clicked piece of code yet - Osmo
Our most clicked piece of code yet
@osmosupplySince our Osmo Vault analytics show that you love the Navigation/Me... - Osmo
Since our Osmo Vault analytics show that you love the Navigation/Menu resources, we decided to add another full-screen one. Bold, fresh, and built to put your links front and cent...
@osmosupplyMassive milestone for us: Osmo 2.0 is officially live! Osmo is evol... - Osmo
Massive milestone for us: Osmo 2.0 is officially live! Osmo is evolving into a real dev toolkit. We're building the platform you'll want open in your browser every single day, for...
@osmosupplyMore @greensock Flip magic! Seamlessly switch between different gri... - Osmo
More @greensock Flip magic! Seamlessly switch between different grid layouts using this setup. It's perfectly synced with CSS variables to fully control the columns and gaps acros...
@osmosupplyThis week in Osmo in Use, we’re featuring Get Hyped, build by Dylan... - Osmo
This week in Osmo in Use, we’re featuring Get Hyped, build by Dylan Brouwer and Kevin Masselink. Here’s what he used: 1. Play Video on Hover (Lazy) 2. Live Form Validation (Advanc...
@osmosupplyBig milestone! We’ve just added the 100th resource to our Vault. A... - Osmo
Big milestone! We’ve just added the 100th resource to our Vault. A couple of months ago when we launched, there were only about 40. We’ve been consistently adding 2 new items ever...
@osmosupplyIntroducing our 'Image Preview Cursor Follower' An effect that's be... - Osmo
Introducing our 'Image Preview Cursor Follower' An effect that's been around for quite some time already, but can be tricky to nail. Our setup allows you to add anything as a prev...
@osmosupplyThe Vault keeps growing, and we’re ready to add another slider-type... - Osmo
The Vault keeps growing, and we’re ready to add another slider-type resource. This one is a visual stack of cards you can drag, with live animation during the drag, not just on re...
@osmosupplyOur Global Parallax Setup is 1 single function that you can add to... - Osmo
Our Global Parallax Setup is 1 single function that you can add to your project, and then create almost any parallax effect on your site. Every part of the @greensock ScrollTrigge...
@osmosupplySpice up your website with a dynamic scaling effect powered by @gre... - Osmo
Spice up your website with a dynamic scaling effect powered by @greensock Flip. In this resource we animate a video as it grows from small to big, but feel free to explore your cr...
@osmosupplyOne of our latest additions is this centered slider. Powered by @gr... - Osmo
One of our latest additions is this centered slider. Powered by @greensock Draggable and Inertia to create a natural and smooth drag interaction. Arrow navigation, thumbnails, aut...
@osmosupplyAwesome project by @lenonguyen using some Osmo Resources 1. Lightbo... - Osmo
Awesome project by @lenonguyen using some Osmo Resources 1. Lightbox Setup 2. Burger Menu Button 3. Detect Scrolling Direction (Up/Down) 4. Button with Bubble Arrow 5. Directional...
@osmosupply