iiinova — where your digital self keeps evolving

Matt Perry @citizenofnowhe.re · 07/11/2025

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...

motion.dev

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.

2447

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 Perry

Bramus @bram.us · 10/09/2025

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-...

620026

Matt Perry @citizenofnowhe.re · 27/08/2025

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]

220

Matt Perry @citizenofnowhe.re · 26/08/2025

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

0253

Matt Perry @citizenofnowhe.re · 22/08/2025

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 🧵

181

Reposted by Matt Perry

Steve Klabnik @steveklabnik.com · 18/08/2025

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

3456392

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/2025

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...

0100

Matt Perry @citizenofnowhe.re · 13/08/2025

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...

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/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/2025

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

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/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/2025

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.dev

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.

1161

Matt Perry @citizenofnowhe.re · 19/06/2025

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

0250

Matt Perry @citizenofnowhe.re · 17/06/2025

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

0172

Matt Perry @citizenofnowhe.re · 16/06/2025

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)

Graph showing increase in motion users in the last year

Graph showing decrease in motion.dev visitors in the last year

2182

Matt Perry @citizenofnowhe.re · 12/06/2025

🚀 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 🤖

040

Matt Perry @citizenofnowhe.re · 11/06/2025

🤖 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

080

Matt Perry @citizenofnowhe.re · 05/06/2025

🚀 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...

2253

Matt Perry @citizenofnowhe.re · 03/06/2025

📏 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

motion.dev

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...

1171

Matt Perry @citizenofnowhe.re · 02/06/2025

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]

290

Reposted by Matt Perry

Joshua Carter @joshcarter.bsky.social · 29/05/2025

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

fractions-compare.pages.dev

Fraction Visualizer

Visually compare fractions and learn equivalence

2103

Matt Perry @citizenofnowhe.re · 27/05/2025

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 🧵...

1252

Matt Perry @citizenofnowhe.re · 23/05/2025

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.

030

Reposted by Matt Perry

DejaVue @dejavue.fm · 15/05/2025

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!

Thumbnail of DejaVue episode 057, showing the headshots of Alex, Matt and Michael as well as the title "Motion Vue"

172

Matt Perry @citizenofnowhe.re · 14/05/2025

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.

1130

Matt Perry @citizenofnowhe.re · 13/05/2025

🧲 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

613312

Matt Perry @citizenofnowhe.re · 09/05/2025

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

6863

Matt Perry @citizenofnowhe.re · 08/05/2025

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

motion.dev

Animate your Figma projects with Motion | Motion for React (prev Framer Motion)

Motion for React is available in both Figma Sites and Figma Make. In this guide, we'll learn how to generate Motion code via its powerful AI authoring tools.

090

Matt Perry @citizenofnowhe.re · 07/05/2025

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...

motion.dev

Supercharging the GTA VI website with Motion - Motion Blog

Rockstar's beautiful GTA VI website could load even faster with Motion's deferred keyframe resolution and use of native browser APIs.

3292

Matt Perry @citizenofnowhe.re · 06/05/2025

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.dev

Add animations to your WordPress site | Motion for JavaScript

Learn how to add animations to your WordPress site using Motion. Motion is a free and open source animation library that's limitless yet easy to learn.

081

Matt Perry @citizenofnowhe.re · 06/05/2025

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...

styleEffect improvements
- Independent transforms
- CSS variable support
- Default value types
- Up to 8x faster per frame compute

0180

Matt Perry @citizenofnowhe.re · 02/05/2025

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

2303

Matt Perry @citizenofnowhe.re · 25/04/2025

🚀 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.

1142

Matt Perry @citizenofnowhe.re · 24/04/2025

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.

SVG transform improvements
- Swapped measurements for fill-box
- m component 10% smaller
- SSR support for SVG transforms

1182

Matt Perry @citizenofnowhe.re · 18/04/2025

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?

2475

Matt Perry @citizenofnowhe.re · 17/04/2025

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

0422

Matt Perry @citizenofnowhe.re · 16/04/2025

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-...

2270

Matt Perry @citizenofnowhe.re · 14/04/2025

🚀 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...

1190

Matt Perry @citizenofnowhe.re · 01/04/2025

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

0351