Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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)

awesomekling's profile picture

Andreas Kling

65,085 subscribers

27,018 Aufrufe • vor 2 Tagen •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche 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.
0:17

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 Aufrufe • vor 27 Tagen

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

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

Andreas Kling

62,179 Aufrufe • vor 1 Monat

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 😎
0:15

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 Aufrufe • vor 1 Monat

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!
0:14

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 1 Jahr

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

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

Andreas Kling

23,900 Aufrufe • vor 1 Monat

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,801 Aufrufe • vor 7 Monaten

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 👀
0:11

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 Aufrufe • vor 1 Monat

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 ↓ 🔗
0:15

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 Aufrufe • vor 1 Monat

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.
0:17

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 Aufrufe • vor 21 Tagen

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

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

Wes Bos

71,941 Aufrufe • vor 10 Monaten

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

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 Aufrufe • vor 2 Jahren

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.
0:14

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 Aufrufe • vor 3 Jahren

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

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

Tim Wilson

53,030 Aufrufe • vor 5 Monaten

💡 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 👇
0:11

💡 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 Aufrufe • vor 2 Jahren

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,782 Aufrufe • vor 10 Monaten

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
0:13

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 Aufrufe • vor 11 Monaten

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

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

Steven Pu

520,847 Aufrufe • vor 8 Monaten

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.
0:14

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 Aufrufe • vor 19 Tagen

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

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

dax

655,445 Aufrufe • vor 1 Jahr