@motiondotdev
Account based inUnited Kingdom
About this account
- Account based in
- United Kingdom
- Connected via
- Web
Account-level information from X, not a live location or the device used for a specific post.
The complete animation toolkit for the web. Formerly Framer Motion. Made by @mattgperry.
Amsterdam
Joined March 2009
- Tweets1.3K
- Following7
- Followers16.3K
- Likes1.7K
Pinned Tweet
We’ve opened two new ad packages on the Motion site.
Our examples embeds gets your brand 1m monthly views across 170k unique developers.
Check out the packages: motion.dev/advertise
🚀 Motion 13.4.4 is out today
> scroll() 40% smaller
> useScroll() 30% smaller
> Up to 70% faster at triggering scroll-linked callbacks.
We couldn't hold these back for long. Motion for @threejs and @matiNotFound's vgpu are now available for everyone!
I wonder if you can guess what game we're excited for after you see our new Motion x Three.js demo
Link to demo:
motion.dev/examples/js-three…
motion.dev/examples/js-vgpu-…
Btw this out-of-focus paint effect was achieved with @MaximeHeckel's blog post: blog.maximeheckel.com/posts/…
Motion retweeted
Reworking our blog interactions
built with @motiondotdev
Our Ultramotion agent in Motion Studio is incredibly quick at editing animations for three reasons:
1. Built on Jev & Luna
2. Works directly on a timeline document model, not destructively on code
3. Don't like it? Cmd-z, no prompt needed
Introducing Motion Studio.
Edit animations directly on your site with our intuitive visual editor and our new Ultramotion animation editing agent (powered by @typesafeai's Jev) for at least 10x faster edits than code LLMs.
Inspection and visual editing are free!
You and Ultramotion edit the same timeline. Ask for a change and it'll work as fast as you do.
It's built on Jev, with complex edits falling back to Luna, which is itself 3x faster at editing our simple document model than editing code directly.
Motion Studio works with every flavour of Motion, in @vite_js, @astrodotbuild, @webpack, @nuxt_js and @nextjs websites, and can optionally connect to @cursor_ai, @claudeai and @OpenAI SDKs for applying edits directly to code.
Check it out: motion.dev/studio?r=x
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!
Previously in Motion+ Early Access, now available to everyone. Check out the API: motion.dev/docs/react-animat…
Motion retweeted
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?
animate() has switched to our (previously) experimental atomic renderer in Motion 13.3.
Now 12% smaller, 20% quicker startup, and much lower per-frame JS 🚀
Motion retweeted
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…
Motion retweeted
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
Motion retweeted
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
Motion retweeted
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…