Motion
@motion.dev
The complete animation toolkit for the web. Formerly Framer Motion.
Reposted by 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 👇
Sharing a short video to show how the menu looks so far 👇
September 3, 2025 at 9:22 AM
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 👇
Sharing a short video to show how the menu looks so far 👇
Reposted by Motion
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 🧵
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 🧵
August 22, 2025 at 11:19 AM
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 🧵
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 🧵
Reposted by Motion
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.
When a tool's this incredible, giving a testimonial is a no-brainer.
If Motion isn't in your toolkit, it should be.
August 9, 2025 at 5:20 PM
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.
When a tool's this incredible, giving a testimonial is a no-brainer.
If Motion isn't in your toolkit, it should be.
Reposted by Motion
🚀 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...
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...
August 19, 2025 at 1:58 PM
🚀 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...
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...
Reposted by Motion
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)
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)
June 16, 2025 at 8:41 AM
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)
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)
Reposted by Motion
🧲 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
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
May 13, 2025 at 11:45 AM
🧲 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
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
Reposted by Motion
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
Go beyond the limitations of your template with timeline sequencing, scroll animations, gestures and more.
motion.dev/docs/wordpress
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.
motion.dev
May 6, 2025 at 2:41 PM
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
Go beyond the limitations of your template with timeline sequencing, scroll animations, gestures and more.
motion.dev/docs/wordpress
Reposted by Motion
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.
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.
April 24, 2025 at 12:42 PM
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.
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.
Reposted by Motion
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?
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?
April 18, 2025 at 1:10 PM
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?
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?
Reposted by Motion
🚀 Motion's mini animate() just got minier. The web's miniest animation function is now only 2.3kb, a 15% reduction. Minsane.
April 1, 2025 at 3:49 PM
🚀 Motion's mini animate() just got minier. The web's miniest animation function is now only 2.3kb, a 15% reduction. Minsane.
Reposted by Motion
🚀 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:
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:
March 25, 2025 at 2:54 PM
🚀 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:
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:
Reposted by Motion
🚀 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...
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...
March 19, 2025 at 2:13 PM
🚀 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...
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...
Reposted by Motion
@astro.build, petite @vuejs.org and @motion.dev can be a pretty powerful combo for some lightweight interactions
March 17, 2025 at 5:49 PM
@astro.build, petite @vuejs.org and @motion.dev can be a pretty powerful combo for some lightweight interactions
Reposted by Motion
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...
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...
March 18, 2025 at 10:19 AM
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...
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...
Reposted by Motion
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...
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...
March 17, 2025 at 1:05 PM
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...
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...
Reposted by Motion
🚀 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 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...
February 26, 2025 at 1:59 PM
🚀 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 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...
Reposted by Motion
🚀 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]
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]
February 24, 2025 at 12:26 PM
🚀 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]
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]
Reposted by Motion
⌚️ 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-...
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-...
February 20, 2025 at 12:51 PM
⌚️ 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-...
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-...
Reposted by Motion
📈 New example: SVG line graph animation with Cursor x AnimateNumber cursor annotation
examples.motion.dev/react/line-g...
examples.motion.dev/react/line-g...
February 19, 2025 at 2:39 PM
📈 New example: SVG line graph animation with Cursor x AnimateNumber cursor annotation
examples.motion.dev/react/line-g...
examples.motion.dev/react/line-g...
Reposted by Motion
🚀 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...
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...
February 4, 2025 at 2:14 PM
🚀 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...
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...
Reposted by Motion
🚀 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?
motion.dev/docs/radix
Which component library would you like to see next?
January 30, 2025 at 1:57 PM
🚀 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?
motion.dev/docs/radix
Which component library would you like to see next?
Reposted by Motion
🚀 Introducing
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
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
January 28, 2025 at 1:55 PM
🚀 Introducing
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
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
Reposted by Motion
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 💪
January 23, 2025 at 11:57 AM
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 💪
Reposted by Motion
☀️ 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...
∙ 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...
January 23, 2025 at 1:18 PM
☀️ 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...
∙ 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...
Reposted by Motion
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...
✅ Shared layout animation for selected state
⌨️ Free keyboard accessibility with onTap + whileFocus
Check it out: examples.motion.dev/react/tab-se...
January 16, 2025 at 2:52 PM
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...
✅ Shared layout animation for selected state
⌨️ Free keyboard accessibility with onTap + whileFocus
Check it out: examples.motion.dev/react/tab-se...