Matt Perry

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]

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 🧵

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.

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 🧵

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

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 🧵

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

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

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

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)

That'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 perspective

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)

Therefore 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

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)

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

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!

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

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)