Matt Perry @citizenofnowhe.re · 09/11/2025I’ve definitely seen conversations about optimising this where possible, but no movement afaik 020
Matt Perry @citizenofnowhe.re · 08/11/2025It can’t be local with inherits false but that’s also not how most people use it so that’s kinda that 120
Matt Perry @citizenofnowhe.re · 07/11/2025Hello, 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...motion.devThe Web Animation Performance Tier List - Motion BlogLearn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list. 2447
Matt Perry @citizenofnowhe.re · 28/09/2025@zackpolanski.bsky.social You are so good at this, you're popping up everywhere and you are so laser focused on the message, I also love that you've got the balls to take it straight to Farage. I've found it a big inspiration. 050
Matt Perry @citizenofnowhe.re · 11/09/2025🚀 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 080
Reposted by Matt PerryBramus @bram.us · 10/09/2025If 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-... 620026
Matt Perry @citizenofnowhe.re · 08/09/2025Love this post! On performance, using css vars triggers paint which negates the perf benefits of using filter over bg color 170
Matt Perry @citizenofnowhe.re · 29/08/2025Im not sure yet! Depends on whether it sells and whether I think I can make a nice API for it 010
Matt Perry @citizenofnowhe.re · 27/08/2025The Motion+ Carousel detects these kind of short bois. If the last page is below the average page length by a TBD threshold, it will attempt to redistribute the page thresholds so they're more evenly distributed. Coming September! 🧵 [2/2] 020
Matt Perry @citizenofnowhe.re · 27/08/2025By 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] 220
Matt Perry @citizenofnowhe.re · 26/08/2025Super 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 0253
Matt Perry @citizenofnowhe.re · 22/08/2025Anyway this is a long way of saying: 📢 Carousel is the next component coming to Motion+ - target mid-September release. 🎉 Also, Motion+ has reached 1000 users! This is a mind-blowing and humbling milestone, thanks for all the support! Join Motion+ motion.dev/plusmotion.devMotion+ — 180+ premium examples and exclusive componentsShip polished animations faster: 180+ copy-paste animation examples and premium Motion components for JS, React & Vue. One-time purchase, lifetime updates. 041
Matt Perry @citizenofnowhe.re · 22/08/2025The correct (IMO) thing to do is to calculated the next page based on the *target* offset. Leaping vs creeping. You can see in the page indicator that we've correctly moved through three pages from three clicks. 100
Matt Perry @citizenofnowhe.re · 22/08/2025Likewise if we're clicking next/prev multiple times in a row, most carousels either 1. Do nothing - allow current animation to continue before allowing further pagination 2. Calculate the next page based on the *current* offset, mid-animation. 3 rapid clicks doesn't get you far: 100
Matt Perry @citizenofnowhe.re · 22/08/2025It's weird to animate just one item at a time. It's like those dreams when you're trying to run away from something and your legs turn to pillow. Just me? Instead, animating all the fully-visible items out the way will cut the number of clicks needed by a huge factor. [...] 100
Matt Perry @citizenofnowhe.re · 22/08/2025Carousels rarely fulfil both of these rules. The ones that do are all on @framer.com - and I wrote that one (unless we find a bug, in which case Ben wrote it and what's a carousel) If a user is clicking "next" we can assume they're done with all the current items. 110
Matt Perry @citizenofnowhe.re · 22/08/2025I 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 🧵 181
Reposted by Matt PerrySteve Klabnik @steveklabnik.com · 18/08/2025Have you ever considered that your PM is “vibe coding” you 3556392
Matt Perry @citizenofnowhe.re · 19/08/2025🚀 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... 0291
Matt Perry @citizenofnowhe.re · 18/08/2025New 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... 0100
Matt Perry @citizenofnowhe.re · 13/08/2025I 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... 071
Matt Perry @citizenofnowhe.re · 01/08/2025🚀 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... 050
Matt Perry @citizenofnowhe.re · 31/07/2025🚀 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 070
Matt Perry @citizenofnowhe.re · 28/07/2025🚀 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... 0230
Matt Perry @citizenofnowhe.re · 23/07/2025🚀 Introducing Motion+ Typewriter! I'll let it speak for itself... motion.dev/docs/react-typewriter 2110
Matt Perry @citizenofnowhe.re · 15/07/2025Also available for JS and Vue examples.motion.dev/js/scroll-hi... examples.motion.dev/vue/scroll-h...examples.motion.devScroll highlightAn example of creating a scrollable list of items where the item in the center of the view is highlighted, using the `useInView` hook and the `animate` function in Motion for Vue. View and copy the so... 040
Matt Perry @citizenofnowhe.re · 15/07/2025🚀 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... 1100
Matt Perry @citizenofnowhe.re · 14/07/2025Many 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 060
Matt Perry @citizenofnowhe.re · 09/07/2025🚀 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... 060
Matt Perry @citizenofnowhe.re · 04/07/2025🎨 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 1272
Matt Perry @citizenofnowhe.re · 02/07/2025Check out the live example: examples.motion.dev/react/ticker...examples.motion.devTicker: OverflowAn example of an animated list of items using the Motion+ Ticker component for React. This example sets the overflow prop, which allows the ticker items to visually extend outside their layout. This m... 000
Matt Perry @citizenofnowhe.re · 02/07/2025🚀 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. 160
Matt Perry @citizenofnowhe.re · 01/07/2025🚀 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. 0130
Matt Perry @citizenofnowhe.re · 30/06/2025🔔 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! 040
Matt Perry @citizenofnowhe.re · 23/06/2025Motion 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.devusePageInView | 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. 1161
Matt Perry @citizenofnowhe.re · 19/06/2025Motion+ 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 0250
Matt Perry @citizenofnowhe.re · 17/06/2025Level 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 0172
Matt Perry @citizenofnowhe.re · 16/06/2025Realistically making it paid now wouldn’t really be cricket. But I also think would kill the library. Scraping the open web is a hard argue re copyright infringement. I would rather figure out how to ride the wave. 110
Matt Perry @citizenofnowhe.re · 16/06/2025That’s definitely something I’ve considered. First step is to get the LLM to remind the user where the real docs source is with a link. Maybe a step after that is mention Motion+ every x convos or whatever with the Motion+ MCP being free from that. 010
Matt Perry @citizenofnowhe.re · 16/06/2025100%. I’ve for sure benefitted for React being the view library of choice for AI 000
Matt Perry @citizenofnowhe.re · 16/06/2025True. I mean they flat out don’t work often. Maybe you can vibe code to a working solution. But never a motion/not motion thing, I just instruct the AI to do it and see what it chooses 010
Matt Perry @citizenofnowhe.re · 16/06/2025I think MCPs are a big part of the solution here, at least for OSS. Motion for AI sits inside your editor and gives you docs without ever having to hit the website. So from here, what's the upsell? That's the exercise for this year. motion.dev/docs/ai-quick-startmotion.devQuick start with Motion for AI | Motion for AIGet started with Motion for AI's CSS spring generation tools, curve visualisation, vibe coding guides, LLM documentation and custom rulesets. 030
Matt Perry @citizenofnowhe.re · 16/06/2025That *will* happen. But it's parasitic. Gemini sinks its teeth into websites, drains them of information, bleeds them of visitor count and revenue. This will obviously kill those sites. Same could be true of Motion. The challenge now is adapting. 140
Matt Perry @citizenofnowhe.re · 16/06/2025So I think the bigger risk for me is people never getting to see the Ticker, or Cursor etc, because they're never on the website, and therefore never want to buy it. This is true of all AI editors, @diabrowser.com etc. I also think the web is so bad now that it does need an AI layer 220
Matt Perry @citizenofnowhe.re · 16/06/2025That's not to say I don't see this risk. I'm all in on AI. I just think if you're building something actually new, like my approach to child cloning in the Motion+ Ticker motion.dev/blog/buildin... then I fail to see how LLMs could ever do this from a first principles perspectivemotion.devBuilding the ultimate ticker - Motion BlogTicker compoments are becoming common decorative features, but building a good one isn't easy. Let's take a look at the problem with CSS components, and how Motion+ Ticker aims to solve them. 100
Matt Perry @citizenofnowhe.re · 16/06/2025My current methodology when starting a new Motion+ API or example is to get AI to generate it first. How well does it do? If the answer is "dogshit" then perfect - I've found something I can build and sell. This is the answer more often than not. 230
Matt Perry @citizenofnowhe.re · 16/06/2025Therefore it could be unlikely to make up for the loss of traffic from Google. AI is changing habits here, quickly. The obvious worry, when starting a business off the back of OSS, is that all the premium examples, all the Motion+ APIs - AI will be able to write all that soon 210
