iiinova — where your digital self keeps evolving

Reposted by Motion

Johann cvl @johanncvl.bsky.social · 03/09/2025

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 👇

032

Reposted by Motion

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

Reposted by Motion

Hugo @hugorcd.com · 09/08/2025

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.

271

Reposted by Motion

Matt Perry @citizenofnowhe.re · 19/08/2025

🚀 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

Reposted by Motion

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

Reposted by Motion

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

613312

Reposted by Motion

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

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

motion.dev

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.

081

Reposted by Motion

Matt Perry @citizenofnowhe.re · 24/04/2025

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.

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

1182

Reposted by Motion

Matt Perry @citizenofnowhe.re · 18/04/2025

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?

2475

Reposted by Motion

Matt Perry @citizenofnowhe.re · 01/04/2025

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

0351

Reposted by Motion

Matt Perry @citizenofnowhe.re · 25/03/2025

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

2501

Reposted by Motion

Matt Perry @citizenofnowhe.re · 19/03/2025

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

513321

Reposted by Motion

Adam Collier @adamcollier.bsky.social · 17/03/2025

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

081

Reposted by Motion

Matt Perry @citizenofnowhe.re · 18/03/2025

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

0141

Reposted by Motion

Matt Perry @citizenofnowhe.re · 17/03/2025

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

0232

Reposted by Motion

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

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

2526

Reposted by Motion

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

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

1322

Reposted by Motion

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

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

1481

Reposted by Motion

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

📈 New example: SVG line graph animation with Cursor x AnimateNumber cursor annotation examples.motion.dev/react/line-g...

0351

Reposted by Motion

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

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

1242

Reposted by Motion

Matt Perry @citizenofnowhe.re · 30/01/2025

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

0251

Reposted by Motion

Matt Perry @citizenofnowhe.re · 28/01/2025

🚀 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

822918

Reposted by Motion

Ilja @xzilja.dev · 23/01/2025

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 💪

0101

Reposted by Motion

Matt Perry @citizenofnowhe.re · 23/01/2025

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

1481

Reposted by Motion

Matt Perry @citizenofnowhe.re · 16/01/2025

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

1315

Reposted by Motion

Matt Perry @citizenofnowhe.re · 15/01/2025

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

0131

Reposted by Motion

Matt Perry @citizenofnowhe.re · 13/01/2025

🕵️‍♂️ 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-...

motion.dev

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.

316224

Reposted by Motion

Matt Perry @citizenofnowhe.re · 08/01/2025

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

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

0381

Reposted by Motion

Matt Perry @citizenofnowhe.re · 07/01/2025

🚀 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

2513

Reposted by Motion

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

🥳 Just received my government name. Let's goooo

3651

Reposted by Motion

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

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

examples.motion.dev

Motion examples

Official examples of how to use Motion, a modern animation library for JavaScript and React. View and copy source code, and discover APIs with links through to original documentation.

3836

Reposted by Motion

Matt Perry @citizenofnowhe.re · 19/12/2024

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

5522

Reposted by Motion

Matt Perry @citizenofnowhe.re · 19/12/2024

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.

Screenshot of examples list ordered by difficulty

Screenshot of info panel showing APIs used section with links to original docs

191

Reposted by Motion

Matt Perry @citizenofnowhe.re · 18/12/2024

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

1141

Reposted by Motion

Matt Perry @citizenofnowhe.re · 17/12/2024

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

3393

Reposted by Motion

Matt Perry @citizenofnowhe.re · 12/12/2024

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

youtube.com

Press gesture

YouTube video by Motion

2272

Reposted by Motion

Matt Perry @citizenofnowhe.re · 10/12/2024

💡 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

171

Reposted by Motion

Danilo Mongelli @rown.bsky.social · 06/12/2024

🚀 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

nomadgem.com

Nomadgem

In-App community for Camper, Vans and RVs travellers.

021

Reposted by Motion

joey @handle.invalid · 30/11/2024

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

031

Reposted by Motion

Matt Perry @citizenofnowhe.re · 27/11/2024

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:

3544

Reposted by Motion

Matt Perry @citizenofnowhe.re · 19/11/2024

🎓 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

motion.dev

Courses - Motion for React (Prev Framer Motion)

Motion for React has video and interactive courses written by the best educators in the world. Enroll today to level up your Motion skills!

4879

Reposted by Motion

Matt Perry @citizenofnowhe.re · 29/10/2024

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

2262