Loading video...

Video Failed to Load

Go Home

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

actualTimWilson's profile picture

Tim Wilson

2,850 subscribers

52,382 views • 2 months ago •via X (Twitter)

ArtsEducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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 🔔
0:12

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 🔔

Surjith S M ✪

203,353 views • 3 years ago

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇
0:15

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,247 views • 3 years ago

100% css 0% javascript Pretty cool that you can run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesome
0:14

100% css 0% javascript Pretty cool that you can run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesome

Dev Ed

88,238 views • 1 year ago

After my previous articles, I wondered: how many other items from various CSS wishlists could I solve with scroll-driven animations? Styling rows and columns, staggered animations, wrap detection, and more — in my new article — “Position-Driven Styles”.
0:17

After my previous articles, I wondered: how many other items from various CSS wishlists could I solve with scroll-driven animations? Styling rows and columns, staggered animations, wrap detection, and more — in my new article — “Position-Driven Styles”.

Roma Komarov (inactive)

37,613 views • 3 years ago

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;
0:13

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

jhey ʕ•ᴥ•ʔ

212,061 views • 2 months ago

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.
0:10

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.

Tushar

12,555 views • 2 years ago

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.
0:16

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.

Roma Komarov (inactive)

138,374 views • 3 years ago

Put together this little demo for the introduction module in this new "Tailwind CSS by Example" course I'm working on. Succinctly covers all of the fundamental elements of building things with Tailwind in one example 👍 Excited to get back in the studio and hit record 🎬
0:15

Put together this little demo for the introduction module in this new "Tailwind CSS by Example" course I'm working on. Succinctly covers all of the fundamental elements of building things with Tailwind in one example 👍 Excited to get back in the studio and hit record 🎬

Adam Wathan

28,667 views • 1 year ago

Chrome 146 is stable 🚀 We’re shipping features that move more logic out of your JavaScript and into the browser → ✨ Scroll-triggered animations (declarative CSS!) 🛡️ The Sanitizer API for XSS-free apps 🧩 Scoped custom element registries
0:12

Chrome 146 is stable 🚀 We’re shipping features that move more logic out of your JavaScript and into the browser → ✨ Scroll-triggered animations (declarative CSS!) 🛡️ The Sanitizer API for XSS-free apps 🧩 Scoped custom element registries

Chrome for Developers

35,752 views • 4 months ago

✨ Created this amazing scroll animation for project section using Framer What you think!! Like, Repost, Comment "Project" for the Remix link (Must follow so I can DM you)
0:18

✨ Created this amazing scroll animation for project section using Framer What you think!! Like, Repost, Comment "Project" for the Remix link (Must follow so I can DM you)

Sai Satvik

17,236 views • 1 year ago

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀
0:16

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀

FHILY👑

96,471 views • 2 months ago

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️
0:19

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️

Una 🇺🇦

38,727 views • 7 months ago

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎
0:12

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎

Florin Pop 👨🏻‍💻

29,839 views • 10 months ago

A SOLO CREATOR JUST SHIPPED A $35,000-TIER ANIMATED SITE IN ONE WEEKEND - WITH CLAUDE CODE + HIGGSFIELD, FOR THE COST OF A SUBSCRIPTION. What you're looking at isn't a template. It's a fully animated, scroll-driven site, generated end to end in a single agentic session. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - not a single hand-coded keyframe → 6 cinematic effects baked in with zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question keeps surfacing: a person didn't build this by hand… did they? For studios billing $100-149/hr, that question lands like a verdict. What this normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between all three → 6 systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It's what justified the invoice. Here's the part the agency won't put in its pitch deck. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Your cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → one session One operator now runs all six systems in a single pass and ships a working site - without opening a frame extractor or writing one CSS keyframe. Full breakdown of how it's built in the article below. Save it & read today 👇
0:19

A SOLO CREATOR JUST SHIPPED A $35,000-TIER ANIMATED SITE IN ONE WEEKEND - WITH CLAUDE CODE + HIGGSFIELD, FOR THE COST OF A SUBSCRIPTION. What you're looking at isn't a template. It's a fully animated, scroll-driven site, generated end to end in a single agentic session. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - not a single hand-coded keyframe → 6 cinematic effects baked in with zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question keeps surfacing: a person didn't build this by hand… did they? For studios billing $100-149/hr, that question lands like a verdict. What this normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between all three → 6 systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It's what justified the invoice. Here's the part the agency won't put in its pitch deck. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Your cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → one session One operator now runs all six systems in a single pass and ships a working site - without opening a frame extractor or writing one CSS keyframe. Full breakdown of how it's built in the article below. Save it & read today 👇

ZEUS⚡️

21,598 views • 1 month ago

I am going to put together a thread covering Trump's second inauguration. Follow along for clips and commentary. (Below is a clip of Biden and Harris arriving.)
0:13

I am going to put together a thread covering Trump's second inauguration. Follow along for clips and commentary. (Below is a clip of Biden and Harris arriving.)

Aaron Rupar

2,185,789 views • 1 year ago

STUDIOS QUOTE $35,000 FOR THIS WEBSITE. A FULLY ANIMATED, SCROLL-DRIVEN BUILD - CINEMATIC CLIPS, FILM GRAIN, GLASS CARDS - SHIPPED IN ONE SESSION FOR $12. Scroll it and one question won't leave: did an AI really assemble all of this in a single pass? For studios quoting $35,000 and billing $100-149/hr, that question lands like a verdict. Here's what the page actually runs: → Motion clips generated from 30+ models - not stock, not hand-shot → Scroll animations written automatically - zero hand-coded keyframes → Six cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing What that used to require: → A designer, a motion artist, and a developer → Weeks of handoffs → Six systems wired by hand - GSAP ScrollTrigger, Lenis, frame extraction, asset optimization, layout, copy That pipeline was the moat. It justified the invoice. It just collapsed into Claude Code + Higgsfield running in one pass. The gap nobody wants to say out loud: → Agency build: $6,000-$35,000+ → Real cost now: a Claude sub + a few dollars of credits → Timeline: weeks → a single session Follow me + reply "web-site" to this post and I will send you the step-by-step Playbook 👇
0:16

STUDIOS QUOTE $35,000 FOR THIS WEBSITE. A FULLY ANIMATED, SCROLL-DRIVEN BUILD - CINEMATIC CLIPS, FILM GRAIN, GLASS CARDS - SHIPPED IN ONE SESSION FOR $12. Scroll it and one question won't leave: did an AI really assemble all of this in a single pass? For studios quoting $35,000 and billing $100-149/hr, that question lands like a verdict. Here's what the page actually runs: → Motion clips generated from 30+ models - not stock, not hand-shot → Scroll animations written automatically - zero hand-coded keyframes → Six cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing What that used to require: → A designer, a motion artist, and a developer → Weeks of handoffs → Six systems wired by hand - GSAP ScrollTrigger, Lenis, frame extraction, asset optimization, layout, copy That pipeline was the moat. It justified the invoice. It just collapsed into Claude Code + Higgsfield running in one pass. The gap nobody wants to say out loud: → Agency build: $6,000-$35,000+ → Real cost now: a Claude sub + a few dollars of credits → Timeline: weeks → a single session Follow me + reply "web-site" to this post and I will send you the step-by-step Playbook 👇

ZEUS⚡️

56,907 views • 1 month ago

So many of you were interested in the waitlist page I put together for X Masterclass. So I've decided to turn it into a Framer template & give it away for FREE! Comment "Framer" below and I'll send it to you 👇 (Make sure you're following me so I can DM you the link)
0:17

So many of you were interested in the waitlist page I put together for X Masterclass. So I've decided to turn it into a Framer template & give it away for FREE! Comment "Framer" below and I'll send it to you 👇 (Make sure you're following me so I can DM you the link)

Hamza Ehsan

35,160 views • 2 years ago

So some of you were big fans of my body suits 👀 So I decided to put this little cute vid together 🥰 Which one is the best colour?? Let me know below! — #bikinimodel #canadianmodel #dress #dresses #bikinis #winter #minidress #canadianbikinimodel #blonde #lingerie #hot #sexy
0:12

So some of you were big fans of my body suits 👀 So I decided to put this little cute vid together 🥰 Which one is the best colour?? Let me know below! — #bikinimodel #canadianmodel #dress #dresses #bikinis #winter #minidress #canadianbikinimodel #blonde #lingerie #hot #sexy

Kat Wonders

12,257 views • 3 years ago

🍊: I just scrolled past some leaks of you (photos & videos from fans at the event) ☀️: Hm? You still need to scroll for leaks? Don't you have firsthand information? (from Ayden himself) No need to show off sir. We all know you always tell Elio about everything you do #aylio
0:10

🍊: I just scrolled past some leaks of you (photos & videos from fans at the event) ☀️: Hm? You still need to scroll for leaks? Don't you have firsthand information? (from Ayden himself) No need to show off sir. We all know you always tell Elio about everything you do #aylio

kanao ☼ slow

17,062 views • 28 days ago