🔵 Creator of motion.dev 📷 Photographer citizenofnowhe.rehttps://bsky.app/profile/citizenofnowhe.rehttps://bsky.app/profile/citizenofnowhe.re/post/3m524sq3tzs25Hello, 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: https://motion.dev/blog/web-animation-performance-tier-list07 Nov 2025 12:55 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3m524sq3tzs25https://bsky.app/profile/citizenofnowhe.re/post/3lykwwet2xc2g🚀 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/tutorials11 Sep 2025 14:19 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lykwwet2xc2ghttps://bsky.app/profile/citizenofnowhe.re/post/3lxf2dfqrzk2wBy 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]27 Aug 2025 12:39 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lxf2dfqrzk2whttps://bsky.app/profile/citizenofnowhe.re/post/3lxcc4vbnxk2jSuper 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.io26 Aug 2025 10:20 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lxcc4vbnxk2jhttps://bsky.app/profile/citizenofnowhe.re/post/3lwydkraot224I 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 🧵22 Aug 2025 11:19 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lwydkraot224https://bsky.app/profile/citizenofnowhe.re/post/3lwr2zaghos2c🚀 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. https://examples.motion.dev/react/card-stack19 Aug 2025 13:57 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lwr2zaghos2chttps://bsky.app/profile/citizenofnowhe.re/post/3lwofoooxv225New 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. https://examples.motion.dev/react/material-design-ripple18 Aug 2025 12:30 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lwofoooxv225https://bsky.app/profile/citizenofnowhe.re/post/3lwc2cc2af226I 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 https://examples.motion.dev/js/layered-sections GSAP https://codepen.io/GreenSock/pen/qEEJBGP13 Aug 2025 14:35 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lwc2cc2af226https://bsky.app/profile/citizenofnowhe.re/post/3lvdsdbfuac2xFriday [contains quote post or other embedded content]01 Aug 2025 13:52 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lvdsdbfuac2xhttps://bsky.app/profile/citizenofnowhe.re/post/3lvdpowf5fs2m🚀 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. https://examples.motion.dev/react/cursor-trail01 Aug 2025 13:05 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lvdpowf5fs2mhttps://bsky.app/profile/citizenofnowhe.re/post/3lvbbcgmy2s2n🚀 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-ui31 Jul 2025 13:42 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lvbbcgmy2s2nhttps://bsky.app/profile/citizenofnowhe.re/post/3luzlwjhqgc2s🚀 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: https://examples.motion.dev/react/infinite-loading28 Jul 2025 12:31 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3luzlwjhqgc2shttps://bsky.app/profile/citizenofnowhe.re/post/3lumwyteptk2m🚀 Introducing Motion+ Typewriter! I'll let it speak for itself... motion.dev/docs/react-typewriter23 Jul 2025 11:45 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lumwyteptk2mhttps://bsky.app/profile/citizenofnowhe.re/post/3ltz3ielqak2c🚀 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. https://examples.motion.dev/react/scroll-highlight15 Jul 2025 14:12 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3ltz3ielqak2chttps://bsky.app/profile/citizenofnowhe.re/post/3ltwlanjae224Many 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/sponsor14 Jul 2025 14:16 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3ltwlanjae224https://bsky.app/profile/citizenofnowhe.re/post/3ltjzet223k26🚀 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 https://motion.dev/error/no-valid-elements09 Jul 2025 14:24 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3ltjzet223k26https://bsky.app/profile/citizenofnowhe.re/post/3lt5f4cv4gs2j🎨 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/studio04 Jul 2025 13:49 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lt5f4cv4gs2jhttps://bsky.app/profile/citizenofnowhe.re/post/3lsyblt5y3223🚀 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.02 Jul 2025 13:03 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lsyblt5y3223https://bsky.app/profile/citizenofnowhe.re/post/3lsvvqqg2322r🚀 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.01 Jul 2025 14:26 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lsvvqqg2322rhttps://bsky.app/profile/citizenofnowhe.re/post/3lstbhsahcs23🔔 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!30 Jun 2025 13:18 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lstbhsahcs23https://bsky.app/profile/citizenofnowhe.re/post/3lsbmq5cy5c2aMotion 12.19 adds the usePageInView() hook for responding to changes in tab visibility. Pause animations and videos in background tabs for CPU-friendly websites 🌿 https://motion.dev/docs/react-use-page-in-view23 Jun 2025 12:51 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lsbmq5cy5c2ahttps://bsky.app/profile/citizenofnowhe.re/post/3lrxm3p3s2c2cMotion+ 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-extension19 Jun 2025 13:13 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lrxm3p3s2c2chttps://bsky.app/profile/citizenofnowhe.re/post/3lrsffwnipc2lLevel 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-extension17 Jun 2025 11:30 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lrsffwnipc2lhttps://bsky.app/profile/citizenofnowhe.re/post/3lrplhclts22eMotion 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)16 Jun 2025 08:40 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lrplhclts22ehttps://bsky.app/profile/citizenofnowhe.re/post/3lrfzzkq4bk2d🚀 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 🤖12 Jun 2025 13:35 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lrfzzkq4bk2dhttps://bsky.app/profile/citizenofnowhe.re/post/3lrdeulpr622p🤖 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-start11 Jun 2025 12:11 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lrdeulpr622phttps://bsky.app/profile/citizenofnowhe.re/post/3lqubx6gmes2x🚀 Introducing Motion+ Ticker for React Lightweight, accessible, multi-axis, performant, flexible, responsive. This is the ultimate ticker component. Let's dive in 🤿 https://motion.dev/blog/building-the-ultimate-ticker05 Jun 2025 12:08 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lqubx6gmes2xhttps://bsky.app/profile/citizenofnowhe.re/post/3lqpgqm7of22g📏 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 http://motion.dev/docs/resize03 Jun 2025 13:51 +0000at://did:plc:jqvil2la5t4yccau2abpmj6t/app.bsky.feed.post/3lqpgqm7of22g