Matt Perry
@citizenofnowhe.re
🔵 Creator of motion.dev 📷 Photographer citizenofnowhe.re
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...
The Web Animation Performance Tier List - Motion Blog
Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.
motion.dev
🚀 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 🧵
🚀 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...
🚀 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...
usePageInView | Motion for React (prev Framer Motion)
Track page visibility with Motion for React's usePageInView hook. Improve performance and UX by pausing animations when the document isn't visible. SSR-compatible and simple API.
motion.dev
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
resize | Motion for JavaScript
Efficiently monitor and react to size changes of the viewport, or HTML and SVG elements, with resize. This function uses the ResizeObserver API to provide performant, per-element resize event handling...
motion.dev