🚀 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…
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
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.
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
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" 🎩🐇
Magic Motion also unlocks "masking" transitions in Framer. Every Frame has an Overflow property that makes animations like these very simple to set up.
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
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…
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
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 />
📣 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
📣 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
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!