David Lapointe Gilbert

Anime.js is 10 years old! 🎂🎉 A short thread about the current state of the lib, an update on the course, a few personal things, and a glimpse of what's next (hint in the video). 1/22 👇🧵

Frustrated with #CSS stuff? You can fill in the State of CSS survey & list your pain points when working with it. survey.devographics.com/en-US/survey... You can be sure I took the opportunity to list the pesky line-clamp, text-stroke, the old background-clip bugs, the lack of filter() support...

Cloudflare has acquired Vite / VoidZero This gives Cloudflare control over the entire stack. They have all the primitives from frontend/backend framework, linting, testing, formatting, JS runtime, db, kv, inference, blob storage, access, etc... smart move! blog.cloudflare.com/voidzero-joi...

For ScrollTimeline-driven animations the `normal` shorthand expands to an animation-range-start of 0% and animation-range-end of 100%. For ViewTimeline-driven animations, it means `cover 0% cover 100%` indeed Also see ep4 of my Scroll-Driven Animations video course: www.youtube.com/watch?v=L1pG...

Would use: #CSS relative alpha `color: alpha(from black / 50%)` nerdy.dev/relative-alpha

Watch out! Chrome has a huge bug with <input type="number"> which causes values to change unexpectedly. It's fixed in Chrome 150, but that won't land until the end of June.

New on the Squarespace Engineering Blog! Squarespace & Web Standards: How We Helped Bring HTML Video & Audio Lazy-Loading to Today’s Browsers. I'm real proud of the teamwork that went into this. Stay tuned for part 2 next week, which will cover dev best practices for using this new HTML standard.

And just like that, we're down to two @joshwcomeau.com @tolin.ski

how to make #CSS view transitions swoop or have motion blur or how I learned to help view transitions not always go in straight lines ⤷ nerdy.dev/swoop-there-...

Adobe Animate/Flash to Rive. We've been making progress on our converter. This one is an old Formula 1 file from our team.

I noticed a sudden spike in the number of weekly downloads — from 2k to 500k — of my package to calculate the CSS specificity of a selector. www.npmjs.com/package/@bra... Turns out the wonderful jsdom started depending on it a week ago 😊 www.npmjs.com/package/jsdom

Less JavaScript, more HTML. The new <geolocation> HTML element handles permission states and blocked permission recovery for you. Just add the tag, listen for the location event, and let the browser handle the rest→ goo.gle/4pPXZFK

I've been experimenting with an upcoming CSS feature called border-shape lately. It's really cool what you can do with it: lots of practical applications + it opens a lot of doors for non-rectangular UIs! Try it in Canary w/experimental web platform features on, & read more: una.im/border-shape

What do these API have in common? * WebTransport * Keyboard Lock API * Grid Lanes w/ flow-tolerance * Threaded scroll-driven animations * WebAuthn PRF extension * ReadableByteStream * Blob.stream() with BYOB reader * Name-only @container queries * min(), max(), and clamp() in <img> sizes attribute

Animate/Flash FLA to Rive importer using FLA sample files that come with Animate

The CSSWG just resolved to add this to the spec 🥳 github.com/w3c/csswg-dr...

#CSS `@custom-media` available behind a flag in Firefox Nightly 🤘🏻 Lovely syntax, just lovely. nerdy.dev/custom-media

And yet, the only way I was able to build this UI was by giving the AI the right answer, telling it to use subgrid instead of `display: contents`. If I didn’t understand the mechanisms and limitations of CSS Grid layout myself, I wouldn’t have been able to provide this guidance.

Anime.js 4.2.0 is out! 🧩 All modules can now be imported individually with subpaths 🎨 CSS variable values support 🏹 Simpler spring API with bounce & duration params 📈 More WAAPI built-in easing functions 🎛️ And an easing editor (animejs.com/easing-editor/)! Plus tons of fixes and improvements!

My favourite CMS gets in bed with my favourite framework. 🥳

@craftquest.io @craftcms.com @travisgertz.bsky.social @brandonkelly.io Hey, missed my flight to Lisbon 😏 What’s up with Craft 6 x Laravel? How long are y’all gonna keep us in the dark?

Announcing TresJS v5.0 🎉 Our proudest release so far. Declarative @threejs.org for @vuejs.org gets a major upgrade: ✨ WebGPU experimental support 🛠️ New create-tres CLI tool ⚡ Re-imagined context 🔧 Refactored composables Ready to build the future of 3D on the web?

🙋 have you ever _wanted_ to deploy a @nuxt.com site to some provider bc of their features/dx/price but decided not to because of a limitation in nuxt? (would love to know even minor nitpicks or frictions)

Nuxt UI v4 it out ✨ It unifies Nuxt UI and Nuxt UI Pro into a fully open-source library with: - 100+ components - 10+ free templates - Figma Kit for everyone nuxt.com/blog/nuxt-u...

IE was right all along

I'm delighted to announce my latest project ⚡️ blazing fast 📦 built from scratch for devs 🎛️ offering full control of your environment 💰 VC funding welcome accept no imitations

Amazing read about vectorial blur and feathering from the Rive app team. rive.app/blog/how-riv...

More performant than other anim libraries out there! It beats Motion in 99% cases, WAAPI in lots of cases yet Julian added an api layer to facilitate its usage, and toes to toes with gsap - outperforming it in many cases like interacting with other libraries like three.js 🔥🔥

Hey @romanmars.bsky.social, are you still learning about con law? Or are you too… "immersed" in it since November that even talking about it over a microphone is just too depressing? 🥲

Anime.js v4 will be released next week, and there's never been a better time to become a sponsor. Major releases drive huge traffic spikes, so if you want to promote your product or company during v4 launch and new landing page unveiling, check out my GitHub sponsor page! github.com/sponsors/jul...

It's not Baseline, but CSS-only carousels are coming to Chrome 135! developer.chrome.com/blog/carouse... by @nerdy.dev

I read all the explanations about how this works, but it still feels like magic 🪄. Thanks for saving my disk's space @siracusa.bsky.social.

Is musk a scam?

i believe what you're describing is sibling-index(), a function specced to return each elements individual index. this would remove the inline custom properties and become more dynamic, moving it towards your suggestion here yeah? github.com/w3c/csswg-dr...

Bluesky in Windows Longhorn Hillel 2003.

Found a neat CSS trick to automatically swap between black or white text based on any arbitrary background color! With relative color syntax, you can use calc to adjust the text color depending if the background is above or below 50% lightness in the LCH color space.

If you don’t know or follow False Knees, what are you even doing? This is post 1 of an entire month of regular daily posts and this year’s story is beautiful ❤️ those that know Montreal will also recognize some of the panels 👌

Just share the real thing. Why drag AI over? Taken with my club telescope.

Kirby vs This Blog Post: mgx.me/kirby-vs-thi... Incredible piece of web design.

Looks like Motion Design School added new tutorials to their @rive.app course!

Hey Bluesky! Is there a way to receive notifications from some accounts? For now, I made a feed that I consult as often as I want but I’d like to be alerted by push notifications. 🤔 Not yet available?

The MacStories.net Starter Pack: go.bsky.app/MSyjAAg

Here's how the Bluesky team has described future plans to make the protocol and platform financially sustainable: developing a subscription model for extra features like high-quality video and customizations, while keeping all basic features free bsky.social/about/blog/1...

ikea.com now on Astro. Heard it was as easy to build as my bookshelf 🇸🇪

One of my favorite features on bsky is labelers (aka one of the pluggable moderation tools) Problem is the app doesn't have a place to browse through them! That's why I created bluesky-labelers.io Thanks to @mary.my.id for all the packages that power it!

Have you ever needed the CSS paint-order property? Really handy when working with text-strokes!