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

London, England
Popmotion retweeted
🚀 Framer Motion 1.11 introduces the new useElementScroll hook! Like useViewportScroll, it generates read-only motion values that you can use to create scroll-bound animations, but for individual elements. Thanks to @souporserious for this one! Docs: framer.com/api/motion/motion…
3
9
85
Popmotion retweeted
🤔 Thinking about template literals for combining motion values
1
3
11
Listen to my conversation with @mattgperry on building Magic Motion — a killer new coming to @framer Motion that brings shared element transitions to #react 🙀 We talk about making FLIP look good and overcoming React performance anxiety… reactpodcast.com/94 #reactjs
9
20
Popmotion retweeted
In Framer, Magic Motion transitions work seamlessly with the Scroll and Page tools. When using Back Transitions, your scrolling and paging position will be remembered across transitions. See an example below.
2
17
118
Popmotion retweeted
Created my own Nook Phone in @framer because Tom Nook wouldn't give me one 🙃 Inspired by @animalcrossing, built without code. Play with it here - bit.ly/2SM45dc
3
13
97
Popmotion retweeted
Magic move that's coming in framer-motion 2 really lives up to its name! 😮 Layout change animation used to be funky and cause distortion on child elements, which is no longer an issue if you use "magic move" 🎩🐇
3
6
77
Popmotion retweeted
Magic Motion also unlocks "masking" transitions in Framer. Every Frame has an Overflow property that makes animations like these very simple to set up.
9
18
256
Popmotion retweeted
What the fuuuuck
We're almost going crazy with React and @framer Motion, but this interaction is turning out really nice ✨ @frankdilo
2
7
151
Popmotion retweeted
Today at 5pm, tune in live to @mattgperry showing us all how to add beautiful animations to our React apps with the new @framer motion 🔥😍
🔴 I'm chatting with @mattgperry about how to make your apps look this great with @framer motion on Thursday at 5pm CEST! 😍🎉 Subscribe to be notified when we go live on: - YouTube: youtube.com/channel/UCevFjf4… - Twitch: twitch.tv/mxstbr - Periscope:
10
29
Take a look at the new features coming to @framer Motion 2! Jason gives me a little scare by jumping off-piste towards the end 😅 but makes his own shared element transition from scratch in just a few minutes
🚩Episode Released! 🚩 Did you miss the live stream yesterday? Watch now as Framer Motion author @mattgperry teaches us about the magic that’s possible when creating animation in @reactjs using @framer Motion! 🎩🐰✨ Watch here 👀 buff.ly/39SCfC0
5
9
Popmotion retweeted
css grid animations with framer-motion 2 - the only thing I'm toggling here is the grid-template-area.🤠 Codesandbox: codesandbox.io/s/animating-g…
5
42
starting in 30 minutes! 👀 @mattgperry will teach us how to do ✨ straight-up magic 🎩with React animation using @framer Motion this is going to be one of those “holy crap that’s possible?!” episodes of @LWJShow — don’t miss it! learnwithjason.dev/let-s-lea…
12
41
Popmotion retweeted
If you know CSS and can write "<AnimateSharedLayout>" you are half way to making responsive shared element transitions in @reactjs. The other half is in 90 minutes!
⚠️Starting in 90 minutes: Let’s Learn Framer Motion!⚠️ Animation in @reactjs using @framer Motion is powerful and flexible. In this episode, Framer Motion author @mattgperry teaches us about the magic that’s possible when using it! 🎩🐰✨ buff.ly/39SCfC0
3
20
Popmotion retweeted
It's got a little way to go before it's ready but Magic Motion is working pretty well with drag now. With your custom list reordering logic, the gestures and animations for drag-to-reorder will be as simple as <motion.div drag animate />
6
19
239
Popmotion retweeted
Learn all about the 🎩🐇 new features in @framer Motion 2 later today! 19:30 CET 18:30 BST 13:30 EST 10:30 PST
📣 Just Scheduled: Let’s Learn Framer Motion! Animation in @reactjs using @framer Motion is powerful and flexible. in this episode, Framer Motion author @mattgperry teaches us about the magic that’s possible when using it! 🎩🐰✨ ⬇️ details: ⬇️ buff.ly/39SCfC0
2
6
50
Popmotion retweeted
You can easily create custom container transitions with Magic Motion in Framer. Here’s a simple Material Design example.
2
18
122
📣 Just Scheduled: Let’s Learn Framer Motion! Animation in @reactjs using @framer Motion is powerful and flexible. in this episode, Framer Motion author @mattgperry teaches us about the magic that’s possible when using it! 🎩🐰✨ ⬇️ details: ⬇️ buff.ly/39SCfC0
4
14
59
Popmotion retweeted
And for your next trick... Framer Motion 2 is now in open beta! Check out its automatic animations: framer.com/api/motion/animat… And the 🎩🐇 behind @framer Magic Move, the new AnimateSharedLayout component: framer.com/api/motion/animat… App Store demo: codesandbox.io/s/framer-moti…
10
65
381
Popmotion retweeted
To celebrate the open beta of @framer Motion 2 later today, I implemented the @NetflixUIE carousel with flexbox and the word "animate". Demo: codesandbox.io/s/framer-moti…
6
24
255
Popmotion retweeted
We’ve been working hard on making high-fidelity prototyping in Framer simple, expressive and fast. Here’s an example of the types of interactions you can now design visually using Magic Motion, Interactions and Components. No code!
13
44
467