Simple JavaScript animation libraries for delightful interfaces. Created by @mattgperry.

London, England
Popmotion retweeted
🎨 Framer Motion 2.1.3 adds support for the new whitespace syntax in CSS Color Level 4! So you can be all "rgba(255 17 0 / 0.5)" and Motion will be like "I understand that". Demo: codesandbox.io/s/framer-moti…
1
9
76
Popmotion retweeted
With Framer Motion 2 you can create this state-driven, spring-animated slideshow in just a few lines of declarative markup. Drag x AnimatePresence x AnimateSharedLayout = codesandbox.io/s/framer-moti…
3
18
139
Popmotion retweeted
🚀 Framer Motion 2.1 adds a new layout animation type, "position". This works great for layers with substantial content changes between renders, for instance the text layer in this demo: codesandbox.io/s/framer-moti…
5
9
108
Popmotion retweeted
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: codesandbox.io/s/framer-moti…
9
53
391
Framer Motion 2 is currently the #2 product of the day on Product Hunt 🔥🚒 producthunt.com/posts/framer…
6
67
Framer Motion, the successor to Pose, just got an update. The new layout animation API means you can now automatically animate between layouts and even between entirely different components. Check out the updated documentation — bit.ly/30g5wDV
4
Popmotion retweeted
🚀 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: framer.com/api/motion/animat…
27
247
1,213
Framer Motion 2 is here! Check out the powerful, new layout animation tools on this freshly released landing page. Plus, play with real, working examples and dive into the code behind them bit.ly/2CdmlHz
2
32
224
Popmotion retweeted
Finally fixed mixing layout and exit animations. If you've used the beta you might have resorted to nesting multiple motion.divs for this. We do the same thing in the Framer UI. But no more!
3
9
78
Popmotion retweeted
Testing @framer Motion 2's drag gesture with AnimateSharedLayout. The faint box shows the white box's DOM layout. When it suddenly moves, the white box is being unmounted and remounted elsewhere, but the gesture seamlessly carries between the two @reactjs components.
3
8
118
Popmotion retweeted
Working on integrating drag and layout animations for @framer Motion 2. Just by adding the "layout" and "drag" props to the ball we can animate it between the two layouts and get expected drag behaviour without visual distortion even as its parent stretches and squashes.
2
7
58
Popmotion retweeted
Here's the finished product! In @framer Motion 2 you'll be able to animate scale and translate on a reprojected component, even when it's performing a layout animation!
Motion's current layout reprojection is, like every other FLIP implementation, incompatible with additional user-set transforms. This is a problem if you want a reprojected component to, for instance, also animate scale on hover. Fixing this is today's job 🤞
7
5
112
Popmotion retweeted
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
21
308
Tried to recreate the some of the new iOS 14 Widget interactions with some @Framer Magic Motion Magic. 🪄 dribbble.com/shots/12292865-…
1
14
114
Popmotion retweeted
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!
11
41
246
Popmotion retweeted
Magic Motion is one of the most exciting features to come out of the recent Framer Web launch. Learn about the masterful engineering work required to create this intelligent no-code animation tool from Motion creator @mattgperrybit.ly/3hh6TKf
17
104
Popmotion retweeted
Go from state A to Z—plus, everything in-between—with Magic Motion in Framer Web. Create brilliant animations and customize stiffness, damping, mass, and delay, 100% code free. Learn more — bit.ly/2Tk37oY
4
10
187
Popmotion retweeted
Framer Web is here. It’s free, collaborative, no-code prototyping. Work fast with premade components and interactions from the Insert Menu. Visually perfect Magic Motion animations. Share links, thread feedback, and hand off animations. Get it for free — bit.ly/2zJX0U2
85
439
2,032
Popmotion retweeted
We recently updated our Example Gallery with brand new Magic Motion examples. Now is a great time to start learning Framer! framer.com/projects/examples
6
20
161
I hadn't tried combining animation with our layout components yet, so I decided to experiment by nesting framer-motion elements inside our <Stack>—and it just worked!
9
20
207