Motion

A little preview of the animated menu I built using @motion.dev x @nuxt.com for my upcoming portfolio 🧡

Sharing a short video to show how the menu looks so far 👇

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 🧵

Thrilled to grace the @motion.dev landing page! ✨

When a tool's this incredible, giving a testimonial is a no-brainer.

If Motion isn't in your toolkit, it should be.

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

Graph showing increase in motion users in the last year

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

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

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.

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

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

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.

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?

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

🚀 Motion's view function is now animateView, introducing a new "wait" interrupt mode.

If a View Transition is interrupted, it snaps to the end before starting the next animation. animateView fixes this by waiting until the current one is finished.

Before/after:

🚀 Introducing Motion for @vuejs.org — A feature-complete port of Motion for React (prev Framer Motion).

Springs, scroll, AnimatePresence, gestures, and yes, layout animations. All that and more, powered by Motion's unique hybrid engine, wrapped up with its simple API.

🔗 motion.dev/blog/introdu...

@astro.build, petite @vuejs.org and @motion.dev can be a pretty powerful combo for some lightweight interactions

The BKMN Collection Day 2: Multi-step badge

This button combines SVG path animations, blur filters and keyframes to build a dynamic and fun information badge.

🔗 React: examples.motion.dev/react/multi-...
🔗 JS: examples.motion.dev/js/multi-sta...

The BKMN Collection Day 1: Notification stack

This iOS-inspired notifications stack uses Motion's variants to gracefully animate between open and closed states with finely-tuned physics-based springs.

JS: examples.motion.dev/js/notificat...
React: examples.motion.dev/react/notifi...

🚀 Introducing Split Text for Motion+

A 0.7kb vanilla JS function for creating beautiful and playful text animations.

Split text into chars, words and lines and animate with Motion, CSS, or anything else.

🔗 motion.dev/docs/split-t...
🕹️ examples.motion.dev/js?search=sp...

🚀 A new copy-pasteable React component just landed: Image Reveal Slider!

Discover how to link slider offset to clipPath to make this image reveal effect. It gives a little tug at the end to provide boundary feedback.

It's also keyboard accessible... [1/4]

⌚️ Recreation of the Apple Watch home screen.

All the scales are calculated declaratively, with each item using chains of useTransforms derived from their x/y position and current pan position.

examples.motion.dev/react/apple-...

📈 New example: SVG line graph animation with Cursor x AnimateNumber cursor annotation

examples.motion.dev/react/line-g...

CSS | Motion for JavaScript Learn how to make spring animations purely in CSS with Motion's spring function.

This guide has more information motion.dev/docs/css

spring() has a .toString() method which generates a linear() timing function string.

🚀 New reveal text example just landed on Motion examples. Performed by switching justifyContent and Motion's layout animations.

With this kind of effect it's important to hide the duplicated text with aria-hidden!

Does this effect have a canonical name?

examples.motion.dev/react/text-r...

🚀 Take Radix to the next level with the official Motion x Radix integration guide! Featuring recommended patterns for exit and layout animations, and a slew of fresh Motion+ examples.

motion.dev/docs/radix

Which component library would you like to see next?

🚀 Introducing <AnimateNumber />

A Motion+ React component for making beautiful number animations. Based on @barvian.me's NumberFlow, this version is built entirely on Motion, so existing users can use it for just +2.5kb.

motion.dev/docs/react-animate-number

Sweating through implementing all of these layout animations today, something that would be so simple with SwiftUI is actually really hard on web atm, but @motion.dev is coming in clutch 💪

☀️ The iOS brightness slider, rebuilt in Motion!

∙ useTransform maps overshoot into tug, stretch and squeeze
∙ Keyboard a11y - tap up/down to change value
∙ Spring-powered "kick" when pressing up/down beyond min/max values

examples.motion.dev/react/ios-sl...

New on Motion+ Examples: Tab select.

✅ Shared layout animation for selected state
⌨️ Free keyboard accessibility with onTap + whileFocus

Check it out: examples.motion.dev/react/tab-se...

Introducing Motion+ for Teams

Power up 10 members for the price of 5!
🧠 Exclusive examples
💄 Premium components
⏰ Early access content
💬 Private Discord

motion.dev/plus

Revealed: React's experimental animations API - Motion Blog React is experimenting with a new animation API based on the View Transition API. How does it work? What can it do? We reveal all in this blog post.

🕵️‍♂️ Revealed: React's experimental animations API.

Yes, React is getting its first native animations component. Discover <ViewTransition /> in my new post, with live demos, copy/pasteable code, and a full examples minisite.

🔗 Read all about it: motion.dev/blog/reacts-...

Before/after comparison of all motion components displaying as MotionComponent vs motion.ul, motion.li etc

🐞 When debugging motion components with React Developer Tools, they used to all appear as "MotionComponent".

But no more! From 11.16.1, they'll appear as motion.div, motion.ul etc. Custom components will even appear as motion.create(YourComponentName)