Motion

The drag() gesture is now available in vanilla JS. Momentum, elastic bounds, direction lock, link to motion values and follow with springs. All your favourites from React are now available everywhere. motion.dev/docs/drag

Introducing Motion UI Gallery for React Eight beautiful built-in arrangements - or roll your own! Build custom detail views with automatic high-res asset transitions. 3D shared element transitions between every state, rendered completely in the DOM. Now in Motion+

It's been a big year for Motion. Aside from a ton of new features, we set out at the start of the year to hit zero open issues by the end of it. Finally, today's the day (and just in time for Zelda)

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

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

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

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

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

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

🚀 Introducing Motion view animations, the View Transition API for the rest of us. Now in Motion+ early access, view() is the easiest way to create view animations. Play, pause, scrub, scroll, and spring. And this is just the start. 🔗 Docs: motion.dev/docs/view 🧵 Live demos

🥳 Just received my government name. Let's goooo

🚀 The first batch of vanilla JS examples have gone up on examples.motion.dev! Owning the examples site is great, makes it easier to keep examples up-to-date, tested and discoverable. The iframes also load faster in the docs, and fit nicer into the overall design.

📢 Introducing Motion's latest sponsor: @figma.com! For years, Figma has been using Motion to drive delightful animations throughout their site, core product, and now FigJam too. So it’s awesome to have them support Motion and help make 2025 a huge year for UI animation!

A couple QoL updates for Motion Examples, hot off the press. 1. Examples now rated for difficulty, and ordered easiest-first. 2. Examples are scanned for props as well as imports, and these are all now linked through to the relevant docs too.

Had a couple things to finish up before 🎄 and my wife kindly set me up in a cozy pub in which to do them. Sat here thinking to myself, it's been an amazing end to a year. Wild really. Lucky for you, it *is* the beer talking. Here's a Motion+ discount code, courtesy of Santa. motion.dev/plus

🚀 Introducing the new Motion examples minisite! This is the new home for Motion examples. This is just the first version but it already has most of the introductory Motion for React examples. Much more to come. 1/3 🧵

🚀 Introducing the Press gesture in Motion 11.14! It has a simple selector syntax, auto-filters secondary pointer events, and most importantly its robust keyboard accessibility ensures that every user has an experience that doesn't just work, but feels great too.

💡 You can now make feature requests, file bug reports and access the source code of Motion Cursor and upcoming premium components and examples via the private Motion+ Github repo. Link your Github account: plus.motion.dev/profile

🚀 New website live: nomadgem.com Built with Next.js and Tailwind, this is a simple project to explore the awesome @motion.dev library. I’ve also migrated all related projects including a Back Office built with @nextjs.org and Material-UI into a Monorepo orchestrated with Turborepo. #BuildingInPublic

Wow that was incredibly fast and easy. Amazing job @motion.dev 👏🏻👏🏻👏🏻

Motion 11.12 springs to life with bouncy new superpowers! 📈 Spring visualiser in docs 👀 Perceptual duration option 🥵 CSS pre-generation now in Motion+ early access 🧵 for more:

🎓 Introducing Motion for React Courses World-class educators @samselikoff.com, @joshwcomeau.com and @emilkowal.ski guide you through Motion, React, and beautiful UI design with a mix of engaging videos and interactive code. Enroll now: motion.dev/docs/react-courses

🧑‍🍳 Can't wait to show you what I've been working on.