iiinova — where your digital self keeps evolving

The 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

Likewise 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

It'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

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

Matt Perry @citizenofnowhe.re · 19/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

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

It's still small compared to Google, but ChatGPT was last week the second largest source of motion.dev traffic. This has grown from nothing 3 months ago. Perhaps this growth will continue but from my own experience you can use a library and never hit the source docs

Graph showing increase in referrals from ChatGPT

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

Hook each item into the ticker offset using the new useItemOffset hook. Fade items in as they enter and leave the ticker, or simply do shit like this:

020

The ticker only measures/animates while in view and respects reduced motion. It's also fully keyboard-accessible. Tab into and out of the ticker with one keypress, and navigate between focusable items with the arrow keys. This is no tab-hog!

140

By default, a velocity-based animation will automatically play. A hoverFactor prop can adjust the velocity on hover. But an offset motion value can be passed through to control the ticker manually. Scroll or drag-driven tickers are a motion value away. examples.motion.dev/react#ticker

Ticker features an optimal cloning strategy. Most tickers rely on manual cloning, or auto-cloning too many items (img 1) When items leave the viewable area, they get thrown to the other end of the carousel. This can eliminate cloning entirely (img 2 & 3)

Matt Perry @citizenofnowhe.re · 02/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

Wrapping the whole carousel and transforming items is setup via useTransform. So can pass our own offset as an arbitrary value and its impossible to "break" the rendering. So making these scroll-driven is as simple as passing useScroll() via the offset prop [3/3]

010

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

children to fill in the gaps at the end. Above, you can see we have to clone at least once as items can be on screen twice simultaneously. Below, we can use these transforms to avoid cloning. In both scenarios, most tickers would have cloned at least one more set of items.[2/3]

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

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

svgEffect improves Motion's simple path drawing APIs by dynamically calculating pathSpacing so that lines loop properly. This makes it easy to make animations like above simply by animating pathOffset [0, 1] on a loop 🧵

svgEffect
- Render SVG styles or attributes
- Simple drawing API with pathLength pathSpacing and pathOffset
- Element-relative transformOrigin

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

Motion's Effects are render functions that run after motion values change. They're low-level, advanced APIs that are being built to replace the existing renderers inside animate() and <motion.div />. The biggest difference is they're atomic, essentially doing less per frame. 🧵

attrEffect
- Render DOM attributes
- Applies via JS property when available
- Auto-casing for data-* and aria-*

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

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

613212

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

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

6863

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

styleEffect is the big new addition and essentially takes the role of the <motion /> component. It renders the output of motion values once per frame, on Motion's read/write-batched frame loop. 🔗 motion.dev/docs/style-e...