Matt Perry
@mattgperry
Followers
20K
Following
7K
Media
994
Statuses
7K
🎉 After six incredible years at Framer, it’s time for my next step. Today, we’re spinning Framer Motion out into its own independent open-source project, to better serve the whole community. Introducing Motion. For React, and now, for everyone.
180
392
5K
🚀 Introducing Motion One. The smallest fully-featured animation library for the web. Built on the Web Animations API, it offers hardware accelerated animations, timelines and more, all for less than a fifth of the size of Greensock. Check it out:
66
628
3K
🚀 Introducing Motion DevTools, a Chrome extension for creating web animations. Inspect, edit and export animations made with CSS and Motion One, directly in your browser. Animating the web hasn't been this fast or fun since the Flash days!.
50
529
3K
Announcing Motion Developer Tools 🛠. I’m making the browser extension I’ve always wanted to use! Record, edit and play animations built with CSS or Motion One. Now in available in early access, exclusively for Motion One sponsors.
31
292
2K
Framer Motion 3D 🔵🔴 has arrived!. It's easier than ever to add beautiful and interactive animations to 3D scenes, with this new animation library for React Three Fiber. Get started: Sandbox:
30
285
2K
🚀 Introducing Scroll, Motion One's new scroll-linked animations API!. This mighty 2.5kb function can link Motion One's animate() and timeline() animations to page scroll. Or use a callback to animate canvas, 3D, or anything you can imagine. Get started:
30
122
1K
🚀 Framer Motion 2 is here!. With the new layout animation API, anyone can automatically animate between layouts and even completely different components. Dive into the docs to see what's new:
30
256
1K
🚀 Introducing Motion Cursor, a React component for creative cursor and follow cursor effects. By default, it's a stylable, animatable cursor replacement that automatically grows and adapts to selectable text and clickable targets. It also respects disabled and user-select 🙏
22
49
882
🚀 Introducing <LayoutCamera />. A powerful new camera in Framer Motion 3D that combines DOM layout animations with @threejs. Animate page layout and 3D scenes with zero distortion. Sandbox: Docs:
14
78
835
🚀 Introducing Motion One for @vuejs. A tiny 5kb library with a simple, Framer Motion-style API. It's never been easier to to add SVG, independent transform, and spring animations to your Vue 3 projects!. Docs: Sandbox:
14
117
809
🚀 Introducing Framer Motion 5!. ✅ No-code experience.✅ Drag-to-reorder components.✅ (Even) simpler shared layout animations. What's new, in depth 🧵👇
10
96
824
🚀 Framer Motion 11.11 introduces object animations. animate() can now accept and animate *any* object. Be it Three.js Object3Ds, Pixi.js Graphics. anything. You can even mix different object types and HTML/SVG elements within animation sequences.
17
50
823
🚀 Introducing the App Store, for web!. Well okay, maybe just its UI. Recreated in @reactjs using the new layout transition feature in Framer Motion 1.6!.
19
93
710
🤖 Jump into Motion with @v0!. Now, every React example can now be opened straight in v0. It's the perfect way to dip into the Motion API. Edit the code directly, or ask v0 to "make it slower", "use a spring instead", or "make me a cuppa", and it'll show you how!
10
43
662
🚀 Pop pop! Framer Motion 7.2 introduces the "popLayout" mode to AnimatePresence. In this mode, exiting elements will be popped from the page layout, allowing surrounding elements to animate into place immediately. Sandbox: Docs:
15
76
622
Think Framer Motion is too big? Think again. Introducing useAnimate mini. Interruptible hardware accelerated animations, spring support, custom easing functions, default value types. It's WAAPI with a little pepper, for just 2.5kb. 📕
19
36
581
The Motion @vuejs integration guide is now available to everyone!. The guide covers:.- Enter and exit animations.- Timeline sequences.- Viewport detection.- Scroll animations.And more!
11
56
550
🔴🔵 Introducing Glass, a new light-bending material for Framer. Create novel web-native effects by mixing masks, overlays and blur with advanced optic effects like color filters and chromatic aberration.
32
52
522
Some hacking with React Three Fiber and Framer Motion's layout animations. Here, we're applying Motion's layout projection calculations into the WebGL camera. This is animated entirely using inverse transforms. w/ @bouchenoiremarc and @huntercaron
8
59
485
🙂 I'm really blown away by the support from Tuesday's announcement. Thank you. Thanks to @framer, @tailwindcss, @emilkowalski_, @linear, @JeroenReumkens, @statamic, @firecrawl_dev and @puzzmotoday for becoming sponsors. That's a good-looking bunch.
8
18
506
Animating size via scale rather than width and height is great for performance, but it visually distorts child content. The new useInvertedScale @reactjs hook in Framer Motion 1.5 provides two MotionValues that correct this distortion!. Check it out:
4
55
477
🚀 Framer Motion 11.4 introduces support for React Server Components. No need to re-export components from a local "use client" file. Just import and use.
19
39
487
📢 Introducing Motion's latest sponsor: @Figma!. 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!
20
10
495
Implement @reactjs drag and drop list reordering in ~130 lines with Framer Motion! . Full @codesandbox example:
4
54
467
🚀 Framer Motion 5.3 makes scroll-triggered animations easier than ever!. The new whileInView prop can define variants to animate to/from as elements enter the viewport. Sandbox: Docs:
9
51
458
Framer Motion 11.0.11 is a quantum leap in animation library performance. Introducing deferred keyframe resolution. 2.5x faster than 10.0 and GSAP animating from a cold start and 6x faster animating between unit types (% ↔️ px). This is about to become super important for SEO.
12
30
436
Like Greensock ScrollTrigger's "pinning" feature? It's actually possible entirely with CSS!. Here's how to use it together Motion One's scroll function:
3
41
420
🚀 Framer Motion 6.4 introduces useInView!. This 0.6kb fat-free utility hook simply returns true when an element is within the viewport. No <motion.div /> necessary, here it is triggering CSS transitions: Docs:
11
51
424
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:
12
15
430
Framer Motion 2's new layout animations are a perfect match for its drag gesture. Sprinkle a little reorder logic and you can build a @reactjs drag-to-reorder UI with just:. <motion.div drag="y" layout />. Demo:
10
58
406
🚀 Introducing Framer Motion 4!. The new LazyMotion component can help 🗜 crank your first-render bundle as low as 4.86kb. Lazy load animation and gesture functionality after first mount. Guide: 👇 1/4
4
65
402
And for your next trick. Framer Motion 2 is now in open beta!. Check out its automatic animations:. And the 🎩🐇 behind @framer Magic Move, the new AnimateSharedLayout component:. App Store demo:
10
68
394
Recreating this iOS cursor effect for a 🕵️♂️ sneak preview of the next Motion Cursor update: Magnetic cursors!
7
8
404
Pretty awesome, The Steve Jobs Archive website was built with @framer Motion. Wonderful use of useScroll and layout animations!.
7
36
391
Super nice usage of @motiondotdev from @vercel here. Though to be fair its hard to judge my real usage this month after I DoS'd myself the other day with a render -> effect -> fetch -> render infinite loop. It's been a while okay.
4
15
405
🎨 Which styles are safest to animate?.🖼 How can I improve the performance of border-radius animations?.🏎 What is hardware acceleration?.⭐️ How do I animate 1000s of star images?. I wrote a guide to answer three of these questions (and more besides):
8
58
390
Implemented using @framer Motion's layout animations and React Three Fiber. @0xca0a made this stunning recreation of @marcinignac's original, and we're working towards an API that can mix DOM layout animations with the 3D world. No clipping, just transforms between CSS layouts.
10
59
384
🚀 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 🧵
14
16
385
💡 Hardware-accelerated CSS and WAAPI animations should be considered *progressive enhancement*, rather than mandatory. Why? One word, that you're probably sick of hearing:. Safari. 🧵 [1/6].
4
55
357
I love Typescript but can someone explain to me how this isn't extremely stupid
23
7
350
🚀 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. 🧵 For live demos and docs
10
23
359
<Watch. initial={{ scale: 2 }}. animate={{ scale: 3 }}. whileHover={{ scale: 4 }}./>
6
16
326
👷♂️🚧 I'm starting a new side-project! An educational resource for motion on the web. I don't know exactly what form it'll take, but if you want to find out with me, sign up at
14
42
326
Make accordions in @reactjs by animating height between 0 and "auto" with Framer Motion. Bonus: Wrap the accordion content with AnimatePresence to only render visible panels.
8
34
317
Just taken a crack at porting @0xca0a's gorgeous switch example to Framer Motion's variants:
3
31
326
Working on an official drag-to-reorder API for @framer Motion 5. For the first version it will:. ↔️ Handle single axis lists.📐 Work with variable-size items.🪜 Auto-apply zIndex to the dragged item
10
23
325
🕵️♂️ 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.
7
26
330
🚀 Introducing hardware-accelerated animations in @Framer Motion!. The new hybrid engine mixes the power of JS animations with the performance of native. Starting with "opacity", it will automatically run animations on the GPU when possible. Learn more:
9
33
319
As part of the latest @framer Motion 2 work, I've split layout animations into individual axes. This makes it possible to set a different transition on each for curved motion and other effects.
13
22
314
🚀 @Framer Motion 10.14 is the first animation library to support hardware accelerated scroll animations. Browsers that support the ScrollTimeline will automatically get this extra performance boost, but works great with older browsers too.
6
13
317
I'm not a fan of premature optimisation but if you know a structure is going to be created *a lot* you're probably better off with a class over a factory function. There's an upcoming Motion PR that makes this switch, leading to 20-25% lower memory usage across all @framer sites
18
20
308
Sneak peak at a new feature I've just finished up for @framer, currently in internal testing💡
9
6
309
🧨@Framer Motion 10.5 introduces useAnimate(). This new hook creates an animate function that's scoped to your component. When it unmounts, all animations are automatically cleaned up!. Docs:
10
25
299
🚀 @Framer Motion 10.15 introduces inView(), The simplest, most optimal way to work with IntersectionObserver. It's long powered Motion's scroll-triggered animations and it's now available to everyone, whether you use React or not!.
4
21
302
⭐️ New Framer Motion 3D demo by @edoardomercati and myself! We blend CSS filters and 3D models to transition from this silhouette into a fully rendered star. Sandbox:
5
22
295
🚀 @Framer Motion 10.13 introduces scroll(). It's the easiest way to drive functions via the new ScrollTimeline API. It's also backwards compatible with older browsers. Plus, as a universal API, it works without React!.
5
32
291
🚀 Framer Motion 6.5 introduces useScroll - the easiest way to create amazing scroll-linked animations in React!. Check out this thread for details and live demos 👇
9
32
278
Drag gesture + elastic drag constraints + MotionValues + CSS variable animation = ~60 lines of declarative code
1
21
276
🎓 Introducing Motion for React Courses. World-class educators @samselikoff, @JoshWComeau and @emilkowalski_ guide you through Motion, React, and beautiful UI design with a mix of engaging videos and interactive code. Enroll now:
9
20
285
Introducing the new Built entirely in @Framer. Some highlights:.🎨 Fresh new design.🔍 Site-wide search.🩷 Popmotion-inspired light mode
13
15
278
To celebrate the open beta of @framer Motion 2 later today, I implemented the @NetflixUIE carousel with flexbox and the word "animate". Demo:
6
25
263
Ported my Apple Watch app menu demo from @framer to production-ready Framer Motion. It took about 2 minutes!.
8
37
266
🤔 How do Framer Motion's layout animations work?. I've written a deep dive on layout projection, a method for animating browser layouts at 60fps:.. TLDR? Watch the talk at Next.js Conf, Stage E, today at:.🇪🇺 19:30 CET.🇺🇸 11:30am PST.
9
40
251
🚀 Introducing Popmotion 9. The motion library behind the Motion library, the lodash of animation. Popmotion 9 is simple, powerful, low level, stable, and tiny.
7
37
255
In the five years since Framer Motion released, loads of exciting new browser APIs have hit the scene. So, do you still need Framer Motion?.
14
41
261
🚀 Introducing Projection, a new and experimental low-level layout projection library!. This is very early work (started yesterday) so expect bugs and rapid breaking changes!. Vanilla demo: Repo:
6
34
254
We had a hackathon @framer, @bouchenoiremarc and @huntercaron just blew some minds with the first proof of concept for a Framer Motion 3D. It already supports animating with variants and AnimatePresence on declarative components like motion.mesh!
12
45
255
🚀 Accessible animations made easy with @framer Motion 1.7!. The new useReducedMotion hook makes it simple to disable autoplaying videos, disable parallax effects, and replace motion-sickness inducing animations with opacity-based transitions!. Demo:
2
51
253
🚀 Framer Motion 3.0 is out now!. This is a major release, but the breaking changes should be minor. We've rewritten the way animation targets are resolved to better handle value unsetting. A nice side effect is whileX and exit props now support variant lists!
7
28
255
📢 React 19 / Next 15 users can now migrate to the "motion" package with the latest v12 alpha.
10
7
256
It's got a little way to go before it's ready but Magic Motion is working pretty well with drag now. With your custom list reordering logic, the gestures and animations for drag-to-reorder will be as simple as.<motion.div drag animate />
7
20
246
🚀 @Framer Motion 10.8 introduces stagger(). Animations across multiple elements can now be staggered from the first item, last item, or anywhere in-between with this new function. Docs: Sandbox:
12
17
246
🧠@Framer Motion performance tip:. If you're not animating transforms independently, move them to "transform" for battery-friendly, high performance hardware-accelerated animations.
9
20
248
🔍 Hover reveal effect with mask-image and @framer Motion. By using a circular gradient mask-image built from motion values, we can use events to track pointer position. Then using the animate function we can reveal the full thing on click!.
6
17
243
How does a 3kb JavaScript animation stack up against the likes of Anime.js and Greensock?. For the majority of use-cases, quite well: Being built on WAAPI also means you get jank-free animations for transform, opacity and filter:
5
19
238
🚀 @Framer Motion 10.9 introduces timelines!. Orchestrate complex WAAPI and MotionValue animations with this new sequence syntax. Sandbox: Docs:
14
21
233
All of January is going to be a hackathon dedicated to the View Transition API! . I'm going to see how close I can get to Motion for React's layout animations using just view transitions. This morning I took some pointers from @bramus to make this drag gesture!
5
9
241
🧨 Framer Motion 3.5 adds a new transition prop to MotionConfig, so you can set default transitions throughout a whole motion tree!
8
12
229
🚀 Update your @Framer Ticker components! Tickers now animate via WAAPI, for smooth 120fps animations in more browsers. Remix:
9
11
223
Early React 19 adopters: The Framer Motion 12 alpha has been updated with all recent updates. ✅ React Server Components support.✅ Automatic willChange.✅ 15% faster layout animations.✅ AnimatePresence 2.0.✅ Improved WAAPI/main thread syncing.✅ 20+ bug fixes
8
11
225
My favourite Framer Motion performance hack for infinitely repeating animations is turning them on and off when they enter/leave the viewport. whileInView makes this incredibly simple to implement. Notice how the ball animation always starts anew when it enters the viewport:
3
11
210