正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 2 天前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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 次观看 • 27 天前

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 次观看 • 1 个月前

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 次观看 • 1 个月前

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 次观看 • 2 个月前

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 次观看 • 1 年前

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 次观看 • 1 个月前

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 次观看 • 7 个月前

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 次观看 • 1 个月前

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 次观看 • 1 个月前

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 次观看 • 21 天前

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 次观看 • 10 个月前

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 次观看 • 2 年前

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 次观看 • 3 年前

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 次观看 • 5 个月前

💡 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 次观看 • 2 年前

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 次观看 • 10 个月前

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 次观看 • 11 个月前

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 次观看 • 8 个月前

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 次观看 • 19 天前

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 次观看 • 1 年前