The complete animation toolkit for the web. Formerly Framer Motion. Made by @mattgperry.
Joined March 2009
- Tweets 1,063
- Following 5
- Followers 14,293
- Likes 1,471
171 Photos and videos
Pinned Tweet
May 27
Motion AI Kit 6 unifies all skills into a single easy-to-remember /motion:
"/motion make these photos into a carousel"
"/motion generate a bouncy css spring"
"/motion performance audit the homepage"
"/motion eli5 useTransform"
2
116
18,875
Motion retweeted
Jun 12
introducing Labs on Aceternity UI
a place where I experiment with cool components, interactions and details from the web (and mine as well) where you can tweak it too
i already recreate components on my YT channel, thought i might as well create something that people can use and learn from
tweak the code, change parameters or bring them in your codebase with shadcn CLI
here's a demo of Wispr Flow's landing page text animation using SVG
available at ui.aceternity.com/labs
powered by @shadcn CLI, Dialkit by @joshpuckett and @motiondotdev
13
7
185
8,189
Jun 12
The new Motion example Bobble Hover shows how to compose pointer position into spring animations that dynamically squish and stretch elements based on velocity.
2
6
88
3,960
Jun 12
Use the tweak pane to try out different physics settings, number of elements, and visualise the dynamically calculated transformOrigin that is key to making the stretching feel right.
motion.dev/examples/react-boβ¦
3
485
Motion retweeted
Jun 11
Sneak peak into a new @framer component! Supports CMS πͺπ»
16
3
116
5,045
Motion retweeted
Jun 10
Scroll carousel with flexible mesh physics. Cards flex and respond naturally to scroll momentum.
Made with @threejs @LenisSmooth and @motiondotdev
9
10
179
18,215
Jun 10
It's curtains for Motion.
Cover. Swap. Reveal. Build your own, configure our presets, or mix and match. Curtains is a tiny, hardware accelerated API for vanilla JS and React, and it's out now for Motion users.
2
4
114
7,550
Inspired by @motiondotdev, here's a blog post about the humble eraser. In tldraw, an eraser is a bullet you drag around with your hand.
tldraw.dev/blog/erasing
3
4
14
2,773
Motion retweeted
Jun 9
Layout transition using @motiondotdev
Instead of moving items individually, the entire list moves as one block.
Motion takes care of the layout animation
@jeetnirnejak
Check out @mannupaaji awesome playlist on motion. Link in the π§΅
3
5
38
3,365
checkout preview
scale-in y translate
made w/ @claudeai
animated w/ @motiondotdev
1
2
11
1,366
Motion retweeted
Jun 6
Made this simple skill showcase component while trying out the new `arc()` function in @motiondotdev
Super fun to use since it is just a single line of code which makes animations from straight to curvesssss...
1
1
44
3,674
Loading animations with stateful transitions have landed on Line and Area Charts π₯
Docs ui.bklit.com/docs/componentsβ¦
Studio ui.bklit.com/studio?hiddenCoβ¦
Built with @motiondotdev
Shimmer text by @iamncdai
12
11
246
14,976
Built this sparkle button to test the new @motiondotdev
arc() helper.
Straight lines feel mechanical. Curved arcs feel alive and interactive, even randomize the position of each star on hover
2
3
58
4,090
Motion retweeted
βΰͺβπ
21
18
406
15,380
Motion retweeted
Jun 5
tried recreating @emilkowalski 's layout animation component with the newly added `πππ()` function in @motiondotdev
super fun to use since its essentially a single line of code
gonna have so much fun playing with this
ππππππππππ={{ πππ’πππ: { ππππ: πππ() } }}
Jun 5
Introducing Arcs in Motion 12.40.
Arcs animate elements along curved paths. These aren't static like offset-path, they're dynamic and work with both x/y and layout animations.
They're easy to tweak too, thanks to strength, peak, and auto-rotate options!
7
242
16,601
Motion retweeted
Jun 5
The internet is this thing thatβs often advanced through the persistent effort of a handful of individuals behind the scenes.
@lochieaxon is one of those wonderful humans.
Please tell him thank you today for making animations on the web that much better and easier for all.
Jun 5
Introducing Arcs in Motion 12.40.
Arcs animate elements along curved paths. These aren't static like offset-path, they're dynamic and work with both x/y and layout animations.
They're easy to tweak too, thanks to strength, peak, and auto-rotate options!
6
5
181
20,517
Motion retweeted
Jun 5
One thing to point out about this demo is it tracks the arc'd x/y velocity and passes that to a spring animation on the basket icon.
That's why if you arc clockwise it has a different bounce to counter-clockwise, likewise if you change the animation speed, arc peak/strength etc
Jun 5
Introducing Arcs in Motion 12.40.
Arcs animate elements along curved paths. These aren't static like offset-path, they're dynamic and work with both x/y and layout animations.
They're easy to tweak too, thanks to strength, peak, and auto-rotate options!
3
2
38
4,622