Matt Perry
@mattgperry
Followers
16,125
Following
87
Media
885
Statuses
6,091
Explore trending content on Musk Viewer
Mother's Day
• 2110060 Tweets
Ángel
• 213618 Tweets
Travis
• 176973 Tweets
Cataluña
• 88514 Tweets
#GrandConcertENGLOTinNYC
• 72861 Tweets
Racing
• 58304 Tweets
#Amici23
• 55198 Tweets
Pacers
• 44280 Tweets
Vitória
• 38866 Tweets
Hawks
• 35581 Tweets
Trae
• 34175 Tweets
#ConexiónHonduras10
• 30530 Tweets
Brad
• 28592 Tweets
Abel
• 27837 Tweets
Bahia
• 26616 Tweets
Romero
• 25212 Tweets
Rony
• 24034 Tweets
Pistons
• 23197 Tweets
雨の月曜日
• 22253 Tweets
Costas
• 18364 Tweets
Veiga
• 17372 Tweets
Belgrano
• 13754 Tweets
土砂降り
• 13559 Tweets
Medina
• 13266 Tweets
Rory
• 13059 Tweets
Fabra
• 11842 Tweets
Payet
• 10057 Tweets
Pinned Tweet
🔴🔵 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.
31
56
519
🚀 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:
68
644
4K
🚀 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!
51
540
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
303
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
297
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
125
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:
31
263
1K
🚀 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
80
867
🚀 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
122
844
🚀 Introducing Framer Motion 5!
✅ No-code experience
✅ Drag-to-reorder components
✅ (Even) simpler shared layout animations
What's new, in depth 🧵👇
10
100
845
🚀 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!
20
95
738
🚀 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:
16
76
640
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
58
509
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
56
492
Implement
@reactjs
drag and drop list reordering in ~130 lines with Framer Motion!
Full
@codesandbox
example:
6
58
483
🚀 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
475
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
42
434
🚀 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
432
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.
11
28
427
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
414
🚀 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
69
414
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:
11
69
407
Pretty awesome, The Steve Jobs Archive website was built with
@framer
Motion. Wonderful use of useScroll and layout animations!
8
38
404
🎨 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
398
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.
3
63
927
11
58
393
💡 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]
5
58
368
I love Typescript but can someone explain to me how this isn't extremely stupid
24
7
365
<Watch
initial={{ scale: 2 }}
animate={{ scale: 3 }}
whileHover={{ scale: 4 }}
/>
6
17
341
👷♂️🚧 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
43
337
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
332
Just taken a crack at porting
@0xca0a
's gorgeous switch example to Framer Motion's variants:
3
31
333
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
332
🚀 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
328
🚀
@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
15
324
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
19
320
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
23
323
Sneak peak at a new feature I've just finished up for
@framer
, currently in internal testing💡
9
6
317
🧨
@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:
11
25
304
🚀
@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
308
⭐️ 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
23
299
🚀
@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
33
298
🚀 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 👇
10
33
288
Drag gesture + elastic drag constraints + MotionValues + CSS variable animation = ~60 lines of declarative code
1
21
285
To celebrate the open beta of
@framer
Motion 2 later today, I implemented the
@NetflixUIE
carousel with flexbox and the word "animate".
Demo:
7
25
277
Ported my Apple Watch app menu demo from
@framer
to production-ready Framer Motion. It took about 2 minutes!
9
38
275
🚀 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
38
264
🤔 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
10
41
262
🚀 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
52
262
🚀 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
260
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
261
🚀 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
29
260
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 />
8
21
254
🚀
@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
252
Some WIP
7
13
254
🔍 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!
🪟 "Blinds" image-reveal effect with
@framer
Motion
In this example we use onLoad and onViewportEnter to detect when an image is ready to be displayed, and then animate mask-image to reveal it.
Sandbox:
4
13
141
6
18
249
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
20
249
🧠
@Framer
Motion performance tip:
If you're not animating transforms independently, move them to "transform" for battery-friendly, high performance hardware-accelerated animations.
10
18
240
🚀
@Framer
Motion 10.9 introduces timelines!
Orchestrate complex WAAPI and MotionValue animations with this new sequence syntax.
Sandbox:
Docs:
15
23
240
🧨 Framer Motion 3.5 adds a new transition prop to MotionConfig, so you can set default transitions throughout a whole motion tree!
8
12
233
🚀 Update your
@Framer
Ticker components! Tickers now animate via WAAPI, for smooth 120fps animations in more browsers.
Remix:
9
11
231
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
10
219
Worth keeping an eye on
@emilkowalski_
's course - looks like he's really pushing Motion's layout animations. Look's great!
3
4
218
Layout animations were such a pain in the arse but when I see all these beautiful sites and UIs I think
1. Worth it
2. Look at those counter transforms and inverse border-radii putting in the work
Do you want to showcase your video content uniquely using
@Framer
? Here is a simple hover option that plays your video
🖥️ Open the live demo →
📀 Remix the project →
Or you can see how I did it below. ↓
9
13
231
3
12
217
🧙♂️Magic Motion can be combined with AnimatePresence!
When a new component enters with an existing sharedId, the old one will be hidden and the new one will animate out from it. When it's removed, it'll animate back to it.
Demo:
Open beta next week 🙂
10
25
212
🧙♂️ [].splice()
Stress-testing nested FLIP shared element animations (aka magic) in
@framer
Motion 2. Not perfect but getting there.
4
21
214
Wow.
@bradlc
is there any part of Framer Motion you didn't use on the new Tailwind landing page? This is hands-down the nicest production website I've seen made with it.
6
8
211
🏎️💨 Framer Motion 11.0.6 speeds up complex value mixing by 2x. Great performance and the best quality interpolation, including:
🌈 Linear RGB color mixing
⛑️ Protection of numbers within var() tokens
🐰 Fuzzy order matching
6
13
210
Working on the next feature for Motion One: 🌀 Springs! For an extra 0.9kb you'll be able to animate transforms with real springs that forward velocity to the next animation.
Here, opacity automatically animates until the moment x hits its overshoot point, with no flickering
10
10
201
🎣Framer Motion's useAnimation hook provides imperative animation controls that you can pass to one or more motion components.
The ability to manually trigger animations can help out in a pinch. Just don't get carried away:
0
16
200
Motion Developer Tools has now been approved on the Chrome Web Store! Install from here and Chrome will automatically keep it up to date with the latest features and bugfixes.
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
303
2K
1
25
197
🚀
@framer
Motion 10 now hardware accelerates backgroundColor in supported browsers.
I almost didn't implement this. Why? Browser RGB interpolation is fundamentally broken, leading to these unsightly dips in brightness.
2
5
195
📰 Introducing Now in Motion!
The Motion One newsletter has evolved. Stay informed with the best of motion across the whole web, featuring Framer Motion, Greensock, React Three Fiber and more.
Read issue 1 now:
5
15
200
📣 Declarative animations are returning to vanilla JavaScript via Motion One!
Springs, inView, stagger, and an API thats even simpler than CSS.
Sponsors, have your say on the upcoming API with this new RFC:
8
16
193
🚀 Framer Motion 5.4 introduces the useAnimationFrame hook. Import into any project for less than 1kb and use it to generate hand-written animations.
See how to use it to spin a CSS cube:
Docs:
1
18
195
🚀 Framer Motion 3.7 introduces the new motion() syntax, a simpler way to make custom motion components.
Use it to animate any React component that forwards its ref prop to a DOM element. Or pass a string to animate custom DOM elements!
Learn more:
4
18
196
🚀
@framer
Motion 9.1 adds more hardware accelerated animations!
Its unique hybrid engine now supports opacity, clipPath, filter, and transform. Smoother animations, longer-lasting batteries.
7
9
193
✍️ Path drawing animations are super easy to orchestrate with Motion One's timeline function and the SVG pathLength attribute.
Check out the new example:
2
11
193
Perforated <div />, etched frosted <footer /> and I don't even know what the third one is. Some digital materials from recent sandboxes, using a mixture of backdrop-filter, background and mask-image.
3
12
184
Goodbye handoff, hello Handshake! 🤝
With Framer and Next.js you can design components and ship them directly to production. This is no-code Framer Motion 5, with instant publish & install.
Get started with Handshake, today:
Did you catch
@leeerob
showing off Framer components in production at
#nextjsconf
? 🤯
We're excited to join
@vercel
in pushing the limits of what’s possible on the web with URL Imports ⚡ Check out the Framer Handshake beta to see how it’s done —
11
71
458
6
10
184
👩🚀 Ever wanted to transform an element without transforming its child? It's possible!
Once per frame, calculate the inverse of each transform (100px becomes -100px etc) and apply to the child in reverse order.
Here's how to do it with Framer Motion:
2
17
184
We've finally built the transition editor I've always wanted to use, and it's just 🚀 in the Framer beta.
Here's 6 things to 🎓 about the new controls:
10
24
177
🚀 Framer Motion 4.1 levels up layout animations!
Use unique transitions for every component in the layout animation.
You can even set a unique delay for parents and/or children (check out the before and after in this vid)
Demo:
9
19
179