Hello, here's a brain dump of everything I know about animation performance. Animating layout isn't always bad. Global CSS variables are a performance killer. Hardware accelerated blurs can crash sites. Surprised? Those and more in this post: motion.dev/blog/web-ani...

🚀 We've launched a brand new tutorials hub! Tutorials were buried in the examples microsite, now they're all in one easy-to-browse redesigned space. And each example has received a massive facelift. Check it out: motion.dev/tutorials

If you thought we were done with View Transitions, guess again! A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent transitions and prevents layering issues. developer.chrome.com/blog/scoped-...

By default, a carousel should paginate as many items as possible. But with a non-looping carousel you sometimes end up in the situation where you've got a this kind of straggler page. 🧵 [1/2]

Super excited to welcome @sanity.io as the newest Motion sponsor! Sanity have been longtime users of Motion and it's amazing they're helping support its future as a platinum sponsor. Check them out: sanity.io

I have two rules for carousel pagination controls. 1. A "page" is calculated from the current item to the start of the next partially-obscured item. 2. Use the current *target* offset, not the current visual offset, to find the next partially-obscured item 🧵

Have you ever considered that your PM is “vibe coding” you

🚀 New example & tutorial: Card stack Honestly my favourite part of making this demo was realising: rotate = mix(min, max, Math.sin(index)) Nice SSR-safe alternative to Math.random() that actually provides a nicer distribution of rotations through the stack. examples.motion.dev/react/card-s...

New Motion+ Example: Material Design Ripple This animation spawns ripples wherever an element's pressed. Once upon a time I tried this effect with a single element using background-image, but multiple elements & scale allow it to be hardware accelerated. examples.motion.dev/react/materi...

I had a question on the Motion+ Discord about how you'd create port this GSAP ScrollTrigger effect to Motion. My intuition was it's doable with CSS position: sticky. There's a little trick in here with position: relative too. CSS examples.motion.dev/js/layered-s... GSAP codepen.io/GreenSock/pe...

Friday

🚀 Just published a new example: Cursor Trail No need to wire your own pointer events: usePointerPosition() in Motion+ returns x/y motion values powered by a single site-wide event handler, throttled to the frameloop. examples.motion.dev/react/cursor...

🚀 The Motion x @base-ui.com integration guide is out now! Additionally, Motion+ members get access to the source code of 13 Motion x Base UI examples, plus a custom LLM ruleset file. motion.dev/docs/base-ui

🚀 Long requested (issue was 5 years old)... New children entering into a staggered list now also stagger in! As easy as delayChildren: stagger(0.2). Motion+ Infinite Loading demo and tutorial: examples.motion.dev/react/infini...

🚀 Introducing Motion+ Typewriter! I'll let it speak for itself... motion.dev/docs/react-typewriter

🚀 New Motion+ example: Scroll Highlight Use Motion's inView function to highlight items as they hit a certain point in the viewport. Built on IntersectionObserver, it's more performant than scroll tracking. examples.motion.dev/react/scroll...

Many thanks to Build UI for supporting Motion from the very start 🙏 Now that Build UI is winding down we're looking for new sponsors! Support Motion, get your brand in front of over 100k developers a month, and receive Motion+ for your whole team: motion.dev/sponsor

🚀 Improved error messaging in Motion Starting with the most common, error messages and warnings will increasingly provide a link to a page that explains the error message in more detail, and offers solutions. i.e motion.dev/error/no-val...

🎨 Motion Studio is in development. The landing page is a proper CSS & Motion transition editor, built using the upcoming Motion Studio SDK. Changes are saved via the URL, so you can bookmark your faves! Build your transitions now: motion.dev/studio

🚀 Motion+ Ticker now supports overflow! This means you can lay a ticker out within your document flow, and items will visually extend out to the edges of your viewport. Ticker's optimal cloning strategy will incorporate the viewport dimensions for minimal cloned elements.

🚀 Motion for React 12.22 introduces stagger() support for delayChildren! This allows greater stagger control than the now-deprecated staggerChildren/Direction. With staggering out from the center or indexed item, plus support for eased stagger.

🔔 Stay ahead of the (bezier) curve — Motion+ Team admins can now enable Slack notifications for new Motion releases! Granular controls allow you opt-in to alerts for either new features, bug fixes, or both!

Motion 12.19 adds the usePageInView() hook for responding to changes in tab visibility. Pause animations and videos in background tabs for CPU-friendly websites 🌿 motion.dev/docs/react-u...

Motion+ users can now use the bezier curve editor in @vscode.dev! Directly edit CSS and Motion via the GUI, and preview in real-time. motion.dev/docs/tools-vs-code-extension

Level up your animations in @vscode.dev with the new Motion for VS Code extension! 📚 Add Motion docs to Copilot 🤖 Generate CSS springs 🤫 More non-AI dev tools coming soon 🔗 marketplace.visualstudio.com/items?itemName=Motion.motion-vscode-extension

Motion usage continues to explode on npm. Downloads have more than doubled in a year. BUT - site visitors are gradually trending downwards 🤔 Perhaps there's a summer lull but IMO these two trends are intuitively incompatible without a broader shift at play (you can guess)

🚀 Motion+ Ticker is now available for Vue! The ultimate accessible ticker, with keyboard nav, velocity-defined animations and optimal cloning strategy. Docs: motion.dev/docs/vue-ticker or braindump directly into your LLM with the Motion+ MCP 🤖

🤖 Introducing Motion for AI Supercharge your LLM with the new Motion MCP: • CSS spring and bounce generators • Spring and easing visualisations • Documentation Plus Motion+ Rules and vibe coding guides for @framer.com, @v0.dev, and @figma.com Get started now: motion.dev/docs/ai-quick-start

🚀 Introducing Motion+ Ticker for React Lightweight, accessible, multi-axis, performant, flexible, responsive. This is the ultimate ticker component. Let's dive in 🤿 motion.dev/blog/buildin...

📏 Introducing resize() in Motion 12.16! This tiny utility has a simple API for tracking changes to viewport and element size. Element tracking uses a single shared ResizeObserver for optimal performance. 🔗 motion.dev/docs/resize

Ticker is the next Motion+ component! It's coming later this week, but first, here's a couple of technical details. Depending on the size of tickers vs their children, they often need to clone children. Motion+ Ticker will minimise the number of clones by transforming [1/3]

My son was having trouble visualizing equivalent fractions, so we made an app. Then we moved on to decimals, and we added to the app. Then long division. Fun activity with him, and a good use case for vibe coding. We even made it a PWA for his iPad home screen. fractions-compare.pages.dev

Massive Effects update has landed in Motion: 🧪 attrEffect, propEffect and svgEffect now in alpha 🎢 Draw animations easier than ever 📐 Support for originX/Y/Z in styleEffect 🧵...

Thanks so much to Make, @elevenlabs.io and OSSI for having me in Prague for a Motion meetup - what a great group of people 🙏 I had such a great time and also managed to have a look around a bit of Prague for the first time.

After a short break, DejaVue is back on track! In the latest episode, the creator of @motion.dev (fka. Framer Motion) @citizenofnowhe.re joins Alex and Michael to talk about Motion in @vuejs.org. Learn what makes Motion different to other Animation libraries, why is Motion for Vue & more Tune in!

Yesterday I had a small startup accidentally buy Motion+ Personal and they were so quick and helpful in repurchasing the Business plan. It reminded me of how a $1 billion+ company completely stonewalled me after I flagged their engineering@ doing the same.

🧲 Introducing cursor zones and magnetic cursors, now in Motion+ Cursor. It's easier than ever to adapt your cursor to your content - and your content to your cursor! All powered with Motion's spring and layout animations. motion.dev/blog/introducing-magnetic-cursors-in-motion-cursor

🕵️‍♂️ Sneak peek at magnetic cursors coming to Motion Cursor next week!

Having a little play this morning and it's true: @figma.com Sites is using Motion to generate its appear, gesture and scroll animations! Building an animation engine for the whole web. 🚧 For anyone with beta access to Figma Make, here's a quick start guide: motion.dev/docs/figma

Rockstar didn't use Motion for their GTA VI website and I'm not bitter about it. No sir! But, if you're interested in how the performance of the site could be improved with Motion's render batching and hybrid engine, then this is the blog for you: motion.dev/blog/superch...

Calling all @wordpress.org developers! It's never been easier to animate your site thanks to our new Motion x WordPress integration guide. Go beyond the limitations of your template with timeline sequencing, scroll animations, gestures and more. motion.dev/docs/wordpress

Motion 12.10 introduces huge improvements to styleEffect. More values, value types, and a massive speed boost 🏎️ Speed improvements are completely down to a new granular renderer that only builds/applies styles that are certain to need recompute. Early access docs: motion.dev/docs/style-e...

🤖 Beep bop boop... Motion now has dedicate docs for LLMs! Feed llms.motion.dev into your token monster

🚀 Introducing Motion's reactive APIs, now in early access. This suite of functions brings the power of Motion for React's motion values to all JS users. Compose chains of values with transformValue and mapValue, and performantly render them with the new styleEffect.

Did you know about the transform-box CSS property? Me neither. It lets you switch SVG transform-origin calculations relative to the view box or the element itself. Motion 12.8.2 uses it to replace measurements for more performant and reliable transforms.

Apple Intelligence "ripple" effect, made in Motion for React. All CSS effects, zero shaders. 🔗 Example: examples.motion.dev/react/apple-... This is only one part of the full Apple Intelligence animation but thought it was interesting enough to isolate. Perhaps a tutorial next week?

Warp overlay recreated in Motion for React Example: examples.motion.dev/react/warp-o... Original React Native source: github.com/eds2002/imme...

Motion Values in vanilla JS are now out of early access! Every power user's favourite reactive Motion API* can now be used anywhere. transformValue and springValue are next! I'm also thinking about render effects to complete the reactive API. *probably 🔗 Docs: motion.dev/docs/motion-...

🚀 Kicking off a new "Inspired by" section in Motion Examples with this Family-style dialog. In this new section I challenge myself to recreate some of the hottest animations across web and mobile with Motion. @ me with some that you'd love to see! examples.motion.dev/react/family...

🚀 Motion's mini animate() just got minier. The web's miniest animation function is now only 2.3kb, a 15% reduction. Minsane.