This Wavy Accordion is a WebGL image accordion where the edges between the images bend as they open, and the quicker you move across them, the wavier it gets. The bend, drag and spring are all variables at the top of the script, so you can dial in exactly how wavy you want it. Available now in the Osmo Vault.

Our latest page transition template has been added to the Page Transition Course collection, bringing the total to 14! Built with Barba.js and animated using GSAP, this double wipe effect gives you the perfect opportunity to show some brand colors on your website. ↓ Course osmo.supply/ptc

Getting a list of cards to animate in with a stagger on scroll can be tricky, especially when the number of columns changes across breakpoints. This Queued Scroll Reveal setup uses a shared queue to keep the stagger timing consistent, no matter how the grid changes. Just add two attributes to the parent and you’re good to go. ↓ Use Osmo in your project osmo.supply

This Globe Gallery started on our Button Pack landing page, and we turned it into an improved version that wraps the images much more neatly around the sphere. It spins slowly on its own, speeds up whenever you scroll, and eases back once you stop. From the number of rows and columns to the tilt, the depth, the spin speed and a bunch more options, it's all easy to tweak at the top of the script.

We added an Elastic Line effect to the Vault. Move your cursor over this <svg> path and it reacts a bit like touching the string of a guitar, stretching with your movement and bouncing back into place. A fun little interaction to make a simple divider feel a lot more alive.

We’re big fans of simple animations that make interactions feel a little more playful. This custom checkbox adds a subtle bounce when selected, combined with an animated checkmark. Fully semantic, built with just HTML and CSS, and easy to implement in any form setup. ↓ Try Osmo for Free osmo.supply/try

Someone asked about Rive in our community the other day, so we decided to build a base setup for it! Rive Setup mirrors our Lottie Setup: drop a Rive on the page with a single attribute and it only loads once it's about to scroll into view, pauses while it's off screen, and shows a still frame for anyone who prefers reduced motion. Available in the Osmo Vault.

We created a Wavy Marquee that infinitely loops across the screen and interacts with the user’s scroll speed and drag movement. Scroll faster and the marquee picks up speed while the wave grows, or drag and swipe horizontally to take control of the movement. Fully responsive, with simple controls for speed and wave shape. A playful way to add some extra movement and depth to your website. ↓ Use Osmo in your project osmo.supply

Top 5 Slider/Carousel Resources 📚 We picked five of our favorite sliders and carousels from the Osmo Vault. From simple ways to browse content to more playful and experimental interactions, there should be something here for your next build. 1. Flick Cards Slider Flick through a layered stack of cards to explore each piece of content. The elastic drag gives every swipe a playful, physical feel as the cards stretch, bounce, and settle naturally into place. 2. Radial Cards Slider A playful slider where cards rotate along a curved path, bringing the active card front and center while the surrounding cards fan out naturally. A great way to showcase visual content with a little more character than a traditional carousel. 3. Liquid Glass Carousel This carousel uses a liquid glass shader effect that refracts each slide as it passes behind the lens. With plenty of variables to tweak the look and feel of the glass effect. Big shout out to Yousuf Soomro, who open sourced the original lens shader under MIT and made this one possible. 4. Cascading Slider This horizontal carousel expands and collapses slides as you navigate through them. The active image gets plenty of space while the surrounding slides remain visible, giving you a preview of what’s coming next. Inspired by the Stripe website. 5. Dropping Cards Stack Watch each card drop out of view as gravity takes over, revealing the next one in the stack. The layered setup adds depth and makes every transition feel surprisingly physical. 👉 Ready to level up? We have a Vault packed with 210+ resources ready waiting for you. ↓ Use Osmo in your project osmo.supply

We just uploaded a fully Dynamic Line Graph that turns your own data (pulled from the HTML) into an interactive graph, with the option to switch between smooth curves or exact lines that follow your data points more closely. Hover across the graph to explore each point through a dynamic tooltip. Perfect for dashboards, reports, case studies, portfolios, or anywhere you want to make statistics and performance data feel a little more interactive. ↓ Use Osmo in your project osmo.supply

Here’s our top 5 most popular resources of last month! • On first place we have the CSS-powered 'Stacking Cards 3D' that we shared for free in collaboration with @webflow! • Second place is the 'Bouncy Content Tabs', a playful way to present some content on your site. • On third we find our 'Mega Navigation' which is a consistent member-favourite and has been in the top 5 many times before! • Fourth is our 'Spatial Cards Slider'. This makes for a 3D effect by curving the slides towards the user, but can also be flipped with a single tweak, to make more of a globe-like effect. • Closing the top 5 is our 'Product Hotspot Modal' which lets you place interactive hotspot targets over a product visual that open a modal with the connected product detail Becoming an Osmo member grants you access to well over 200 of these resources → link in bio

Not every animation has to steal the show, sometimes it’s the little details that bring everything together. This Analog Clock updates live based on any timezone you give it, making it a fun little addition for showcasing offices, studios, or teams spread across the globe. Or just add it as a visual element to your portfolio to show where you’re based. ↓ Use Osmo in your project osmo.supply

This carousel has a liquid glass shader running over the top, refracting your slides as they pass behind it. Drag or swipe and it settles onto the nearest image by itself. The size, rotation, colour, ring and dispersion of the lens are all easy to tweak with variables at the top of the script. Big shout out to @YousufSoomroDev, who open sourced the original lens shader under MIT and made this one possible. Available in Osmo now

This Interactive Grid turns your background into a subtle field of dots or pixels that reacts as you move across the page. Dots around your cursor smoothly grow and become more visible, creating a soft trail of movement without taking over the design. Built with , the pattern can efficiently stretch across multiple stacked sections while staying perfectly aligned, so it feels like one continuous grid. You can even switch colors between light and dark sections without breaking the pattern, and tweak the size, spacing, radius, scaling, easing, and more directly in the JavaScript. And yes, you might remember we released an Glowing Dots Grid last year. That version uses GSAP and is more of a playful, attention-grabbing interaction for heroes. This new setup is designed as a background effect, with smaller and more subtle interactions that can continue across your entire page. ↓ Give Osmo a try (For Free) osmo.supply/try

One more scroll transition! This one uses a single curve to cover your section. Fully configurable with data attributes; curve depth, reveal mode, scroll positions. Just drop a div in your section, set your attributes, and you're done ✨ Part of the Osmo Vault, become a member today → link in bio!

This product section lets you place interactive hotspot targets over a product visual that open a modal with the connected product detail, with smooth CSS-powered transitions, looping navigation, arrows and auto-generated dots, all easy to customize. ↓ Try Osmo for Free osmo.supply/try

This floating dock is a handy way to guide visitors through longer pages. It always shows the section you're currently reading, swapping its label with each one you pass, and hovering it reveals the full list of anchor links. Comes with either a 'bouncy' or a smooth feel. A data attribute lets you control exactly where it shows and hides, so you can run it across a full page or just a single process, feature, or portfolio section. Part of the Osmo Vault with 200+ resources: link in bio 🔗