Use the scroll-padding CSS property when using a scroll... fade so your items don't get stuck in the fade region. Bonus: It also makes clicking through each option way more convenient!show more

💡 CSS Tip! Get the scroll progress of the... page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇show more

when you add fade out for the scrollable container,... make sure it won't overlap your scroll barshow more

`scroll-padding-block` in a `textarea` so the text always has... a gap with the bottom edgeshow more

How I built with Lovable 👇 1. Start with... midnight blue + soft sand feels cinematic instantly 2. Tell Lovable to make it a single scroll page with scene transitions 3. Add a lone figure walking through a dreamy 3D landscape 4. Each scroll section reveals a new sleep science fact 5. Use CSS fluid shapes for organic background movement 6. Wide spacing + slow fade-ins let the content breathe 7. Deploy in one click no code, no agency, no $10k budgetshow more

Make your UI smarter with scroll-state()! → With CSS... scroll-state() queries, you can easily manage stuck, snapped, and overflowing elements.show more

kinda wild how far you can get with CSS... alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙show more

Tailwind CSS Tip ✨ You can create a pure... css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔show more

extra detail: animate a CSS custom property from 0... to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);show more

DEVIL DINO ULT TECH. Have jump on scroll wheel,... use when stuck or in a small room for it to count as stompsshow more

Let’s design a custom scroll indicator using the newly... released scroll APIs in iOS 18!show more

I put together some Tailwind CSS utilities for masking/fading... edges of scroll containers using scroll-driven animations. Link below ↓show more

You can enable scroll snapping with CSS scroll-snap-type and... scroll-snap-align 🚀show more

📝 Solved by CSS Scroll-Driven Animations: hide a header... when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderanshow more

introducing: text scroll animator component for Framer use this... component to animate your text with smooth scroll-triggered effects like blur, rotation, scale, and more! comment "SCROLL" and i’ll send you the component. :)show more

The best way to scroll on your phone

The way Luigi Mangione makes sure the press captures... his fire new taper fade omg 😫show more

When you put your iPhone on the charger, Bauhaus... Clock automatically appears with a soft, gentle fade. It’s a subtle detail, but it makes the whole moment feel more elegant and intentional. The video can’t do it justice. It looks stunning on the real device.show more

We had this long-standing papercut at Linear where the... menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:show more