@motiondotdev

The complete animation toolkit for the web. Formerly Framer Motion. Made by @mattgperry.

 Amsterdam
motion.dev
Joined March 2009
  • Tweets1.3K
  • Following7
  • Followers16.3K
230Media
Motion retweeted
Yuri
@MrBye32Oct 19
Meet GPUI Motion A Motion-inspired animation library for native Rust interfaces Springs, layout transitions, drag & snap, and animated text
13
49
6
872
21,290
Motion retweeted
Yanis Lebzar
@dev_yaOct 19
Delete interaction ✨ The undo grows out of the button you pressed. Confirm on the same spot. Built with @motiondotdev
5
5
80
2,608
When developing Gallery, main goal was to get all the 2D and 3D arrangements animating smoothly between each other. The technical term for the naive approach is "absolutely fucking mental mate" - images flying everywhere. The final component allows grouped movement only.
4
1
18
1,943
Motion retweeted
Motion
@motiondotdevOct 15
Replying to @note_no196973
The problem is all transforms have to be animated together. Even when using translate instead of transform x and y need to start and stop at the same time and use the same transition settings Motion has never had this limitation but when animating x and y it happens on the main thread. But now these animations happen on the compositor - something CSS can’t do.
1
1
4
492
Motion retweeted
Malay@pmalay694Oct 13
Scrub Timeline ⋆｡°✩ made with @motiondotdev
1
3
1
109
3,185
always animating my heroes 😍 xitter.cf/augustasdesign/status/…
Augustas
@augustasdesignOct 9
hero section design
2
1
22
1,647
Motion retweeted
rick-hup@hp0844182Oct 2
AnimateView is now available in Motion for Vue 2.5 motion.dev/docs/vue-animate-…

AnimateView | Vue view transitions | Motion for Vue

Use AnimateView in Vue to run enter, exit, update and shared element animations on the native View Transitions API, with Motion transitions and springs.

motion.dev
Motion
@motiondotdevSep 16
Motion 13.4 introduces <AnimateView /> A lightweight view transitions component built on React's new ViewTransition API. Adds spring support, dynamic targets, animation controls, and a simple props API - no more wrangling pseudo selectors!
3
12
674
Motion retweeted
P!
@iPariolaSep 30
✨ Career section w/@motiondotdev
1
12
81
1,860
Design Engineering Tip: Straight-line motion can feel a bit mechanical. A subtle arc often makes it feel more natural, closer to how things move when you toss them. Motion has arc() for this: transition={{ path: arc({ strength: 0.9, rotate: 0.8 }) }}
10
10
454
18,044
Reworking our blog interactions built with @motiondotdev
6
15
3
327
13,309
Motion retweeted
David Haz
@davidhazSep 23
This component is just beautiful. Dither Veil is now live, available for free. Works with any image, five different dithering patterns, over 16 total customization options.
28
63
5
991
40,211
Finally tried the new @motiondotdev AnimateView API it's seriously a game changer
1
1
48
3,343
New animation dropped on craftUI Try it here: craftui.space/sections?slug=… Made with @motiondotdev scroll driven animation @SushmaLal125823 its live now. @edo_lunardi @mannupaaji sir any way to improve this?
6
4
28
2,070
Motion retweeted
Soumya
@soumyadesignSep 13
Tried a lenticular swipe motion interaction which reveals a new artwork every time you drag your cursor across it. I used Met's Open Access APIs to cycle the paintings for this. 🪭 between-paintings.soumya-raj…
11
10
1
221
6,643
You probably need a bit more rhythm in your life. My quick pro tip for improving your web designs is to choose one major and minor spacing unit for vertical rhythm, and align everything to it by default.* *this is also how you teach agents to design productively
31
23
6
963
89,202
Watching Netflix is not bad always. 🤪 Tried to recreate the PIN pad animation for multiuser sign in. Try it here: craftui.space/blocks?slug=ne… - Used arc() from @motiondotdev - Learnt from Acelearn about arc() written by @mannupaaji (Paaji does not mention this much though) Blog link: acelearn.dev/learn/motion/ar… - Used Dialkit and storyboard animation made by @joshpuckett @radiumcoders @jeetnirnejak @alaymanguy @ajaypatel_aj
4
4
27
3,216
Recreated the iPhone Duo fold animation in CSS + @motiondotdev The interesting part is that the image itself never rotates. The frame changes shape around it, using clipping, blur, and shading to create the illusion of a real fold. Then I turned it into a carousel. Demo: iphone-duo-fold-animation.ve…
1
7
2
103
7,136
Motion retweeted
Raul
@raul_droncaSep 9
Photo Gallery Interaction
6
5
145
5,702
Happy to introduce Motion Panels. A React library for resizing and toggling panels with animations. It has a similar API to react-resizable-panels but with the addition of Motion.
Tamery.app
@tamery_appSep 9
We created a new library to meet our needs for resizing and panel animations.
35
73
5
1,440
98,530
Motion retweeted
Sujal
@hecodesformeSep 4
Bought motion.dev/plus today, connected the MCP to my claude code and in under 10 minutes my website went from a 6 to an 8.5 INSANE!!! @motiondotdev @mattgperry
1
1
514
Load more