Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

More CSS off the main thread! I just implemented parallel scroll-driven animations, so they can update even while the main thread is busy! 🤓 Left: Ladybird Right: Chrome (but every other browser looks the same)

Andreas Kling

65,085 subscribers

27,018 views • 2 days ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Handling CSS :hover off the main thread! This is a work in progress but I love this so much, I just have to share it! 🤓 Ladybird on the left, Chrome on the right. The demo runs JS for 250ms repeatedly, to simulate a busy page.

Handling CSS :hover off the main thread! This is a work in progress but I love this so much, I just have to share it! 🤓 Ladybird on the left, Chrome on the right. The demo runs JS for 250ms repeatedly, to simulate a busy page.

Andreas Kling

13,788 views • 27 days ago

Browsers should do CSS layout off the main thread! 🤓 Top left: Ladybird (work in progress) Others: Chrome, Safari, Firefox

Browsers should do CSS layout off the main thread! 🤓 Top left: Ladybird (work in progress) Others: Chrome, Safari, Firefox

Andreas Kling

62,179 views • 1 month ago

Work in progress, but this is so fucking cool I just have to share.. I'm moving the entire CSS pipeline off the main thread in Ladybird. This allows us to animate any CSS properties we want and they just keep going smoothly despite heavy JS execution! Video demo is animating a bunch of flex and grid layouts while JS churns on the main thread. Same demo in Chrome for comparison. Welcome to the future, bros 😎

Work in progress, but this is so fucking cool I just have to share.. I'm moving the entire CSS pipeline off the main thread in Ladybird. This allows us to animate any CSS properties we want and they just keep going smoothly despite heavy JS execution! Video demo is animating a bunch of flex and grid layouts while JS churns on the main thread. Same demo in Chrome for comparison. Welcome to the future, bros 😎

Andreas Kling

35,774 views • 1 month ago

I moved CSS transform and opacity animations off the main thread in Ladybird and I just love it so much 🤩 Now we can chew on all that JS framework bloat while elements fade in and fly around smoothly!

I moved CSS transform and opacity animations off the main thread in Ladybird and I just love it so much 🤩 Now we can chew on all that JS framework bloat while elements fade in and fly around smoothly!

Andreas Kling

25,519 views • 2 months 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

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

Text animations running while JavaScript blocks in 1.5 second bursts. Top left: Ladybird with new multi-threaded CSS engine 🤓

Text animations running while JavaScript blocks in 1.5 second bursts. Top left: Ladybird with new multi-threaded CSS engine 🤓

Andreas Kling

23,900 views • 1 month 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

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,801 views • 7 months ago

React Native on desktop, powered by Rust + GPUI 🦀⚡️ Reanimated + Worklets are alive: springs, orbiting particles, and scroll-driven motion—all running on the UI thread, even while JavaScript is busy. A sneak peek at react-native-gpui 👀

React Native on desktop, powered by Rust + GPUI 🦀⚡️ Reanimated + Worklets are alive: springs, orbiting particles, and scroll-driven motion—all running on the UI thread, even while JavaScript is busy. A sneak peek at react-native-gpui 👀

Ammar Ahmed

17,658 views • 1 month ago

if you build animated interfaces for the web, this is essential reading a clear, practical look at the main thread and the real cost of animation in javascript and css the difference isn't just measurable, it's something you feel ↓ 🔗

if you build animated interfaces for the web, this is essential reading a clear, practical look at the main thread and the real cost of animation in javascript and css the difference isn't just measurable, it's something you feel ↓ 🔗

jhey ʕ•ᴥ•ʔ

47,304 views • 1 month ago

When you ask Claude to run tasks in parallel, it starts a nested session for each one. Each reports its result back into your main session when it's done, so the main thread stays readable.

When you ask Claude to run tasks in parallel, it starts a nested session for each one. Each reports its result back into your main session when it's done, so the main thread stays readable.

ClaudeDevs

115,784 views • 21 days ago

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate

Wes Bos

71,941 views • 10 months ago

2x Champ so you can add it to the other nicknames I got — just know the main one is H1M #ItWasAlwaysMe #RunThatTableWGS

2x Champ so you can add it to the other nicknames I got — just know the main one is H1M #ItWasAlwaysMe #RunThatTableWGS

Nidal

17,921 views • 2 years ago

Are those … CSS Scroll-Driven Animations on in Safari? Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.

Are those … CSS Scroll-Driven Animations on in Safari? Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.

Bramus

42,676 views • 3 years ago

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

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

Tim Wilson

53,030 views • 5 months ago

💡 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 👇

💡 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 👇

CSS by T. Afif

35,659 views • 2 years 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 ⬇️

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,782 views • 10 months ago

This is what Disneyland looks like on Main Street for the holidays Americans who have went to Disneyland recently in the comments say the park is so busy now it’s not even worth going

This is what Disneyland looks like on Main Street for the holidays Americans who have went to Disneyland recently in the comments say the park is so busy now it’s not even worth going

Wall Street Apes

315,238 views • 11 months ago

You can even assign different agents under the same thread 🤯 Just like slack channels, except it's occupied with agents.

You can even assign different agents under the same thread 🤯 Just like slack channels, except it's occupied with agents.

Steven Pu

520,847 views • 8 months ago

I'm calling it. Claude Code Desktop is now amazing. Especially the new '/btw' feature. Each side chat opens in its own tab, so now you can branch off without losing the main thread. I'm Claude Code Desktop-maxxing now.

I'm calling it. Claude Code Desktop is now amazing. Especially the new '/btw' feature. Each side chat opens in its own tab, so now you can branch off without losing the main thread. I'm Claude Code Desktop-maxxing now.

Dan McAteer

46,792 views • 19 days ago

haha idiots they implemented the paywall on the frontend so i can just inspect ele—

haha idiots they implemented the paywall on the frontend so i can just inspect ele—

dax

655,445 views • 1 year ago