Simple JavaScript animation libraries for delightful interfaces. Created by @mattgperry.
London, England
- Tweets 1,671
- Following 92
- Followers 2,388
- Likes 1,479
Popmotion retweeted
🧙♂️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: codesandbox.io/s/framer-moti…
Open beta next week 🙂
10
23
202
Popmotion retweeted
the framer "magic motion" demo works nicely with preact
codesandbox.io/s/framer-moti…
1
15
122
Popmotion retweeted
🎩🐇In @framer Motion 2, a component can be given a magicId. When a new @reactjs component with the same magicId is added, it will appear to animate from the old one.
It makes stuff like this underline animation as simple as a boolean. Here's the code: codesandbox.io/s/framer-moti…
23
63
508
Popmotion retweeted
After 9 months, @framer Motion is about to overtake Pose in weekly downloads!
If you haven't upgraded yet, here's a full guide: framer.com/api/motion/migrat…
2
6
58
Popmotion retweeted
Level Up Codeblog
Painless Route Transitions with Framer Motion and React Router
youtube.com/watch?v=sIm1ApP5…
1
4
19
Popmotion retweeted
🧙♂️ [].splice()
Stress-testing nested FLIP shared element animations (aka magic) in
@framer Motion 2. Not perfect but getting there.
codesandbox.io/s/framer-moti…
3
20
202
Popmotion retweeted
Just released our Animating React with Framer Motion course preview on Youtube. youtube.com/playlist?list=PL…
@framer @reactjs
1
4
27
Popmotion retweeted
🧙♂️ @framer Motion 2 will allow you to animate between two completely different @reactjs trees.
By giving the same label to components within each tree, they'll seamlessly animate between each other as they swap. Regardless of hierarchy.
codesandbox.io/s/framer-moti…
14
61
517
Popmotion retweeted
👻 AnimatePresence gets a boost in Framer Motion 1.10!
☠️ Before: Each child had to possess a single motion component with an exit prop.
🔥 Now: A child can contain any number of motion components or usePresence consumers. It'll only be removed when they *all* finish animating.
2
6
59
Popmotion retweeted
The Magic Motion distortion correction will automatically apply to magic children, too. And their children's children, and their children's children's children.
On the left, layoutTransition, and on the right, 🔮
2
1
48
Popmotion retweeted
🔮 Magic Motion will use the FLIP technique to performantly animate layouts using transforms. Usually, FLIP introduces distortion on borderRadius and boxShadow, but this is magic, so...
Check out the difference between the @framer Motion 1's layoutTransition vs 2's magic:
11
15
144
Popmotion retweeted
The value in a beta test is people coming up with use cases and ideas you hadn't previously considered.
I was inspired by a demo from @ruucm to make one of these moving/resizing selection highlights:
1
3
55
Calling all Minneapolis devs!
You've got less than a week to snag your ticket to learn about “Animation with Framer Motion” from @tinykitelab! Secure your ticket for 3/10 today and join us!
#mplsjrdevs #framermotion #webanimation
mplsjrdevs32.eventbrite.com
1
Popmotion retweeted
Just seen the first Framer Motion 2 demo by someone who isn't me, @_joerglehmann sprinkling a little magic on the @gatsbyjs default starter page with these shared element transitions!
5
12
142
Popmotion retweeted
Hello! I'm looking for c̶a̶n̶n̶o̶n̶ ̶f̶o̶d̶d̶e̶r̶ beta testers for @framer Motion 2.
We're working on a new feature that lets you keep your presentation in CSS, your hierarchy in @reactjs, and your animations in pure MAGIC 🧙♂️. If you're interested helping me break it, DM me!
15
11
107
Popmotion retweeted
Exploring the power of layoutTransition property of framer-motion with the new CSS grid feature 🤩
6
37
Popmotion retweeted
I'll be streaming some Framer Motion and TSDX stuff after my video publishes and I get back from voting.
2
6
Popmotion retweeted
🚀 @framer Motion 1.9 introduces the usePresence hook!
It provides low-level access to AnimatePresence, so you can create custom @reactjs unmount handling. like exit animations using CSS transitions, Anime.js or WAAPI.
Here's a demo using React Spring: codesandbox.io/s/framer-moti…
2
19
172