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
🚀 New in Framer Motion 1.4.0: Exit animations for any component!
As long as its first motion component contains an exit prop, you can now animate out any component with AnimatePresence.
5
14
93
Popmotion retweeted
I decided to rewrite my recent BottomSheet experiment with Framer Motion by @framer and I gotta say that this lib is just incredible 😍
I replaced react-spring + react-use-gesture + body-scroll-lock with just framer-motion! 🤯
Code: github.com/Temzasse/playgrou…
#reactjs #animation
3
8
71
Popmotion retweeted
SVG filters can also be animated in @reactjs using @framer Motion. So you can animate effects like this duotone filter!
Every prop of every SVG filter is supported, using all the same spring physics, keyframes, variants etc
codesandbox.io/s/framer-moti…
10
56
Popmotion retweeted
Make accordions in @reactjs by animating height between 0 and "auto" with Framer Motion.
Bonus: Wrap the accordion content with AnimatePresence to only render visible panels.
codesandbox.io/s/framer-moti…
8
32
312
Popmotion retweeted
Had a pop at this here guys: codesandbox.io/s/happy-bhabh…
Springs feel less rigid now. @mattgperry is there a better way i can set the y offsets? maybe using useTransition? currently overriding the drag x/y pos in the onDrag cb.
2
2
7
Popmotion retweeted
With Motion, you can combine the positionTransition prop with AnimatePresence to animate @reactjs notification panels. The other notifications will smoothly animate into their new positions as a result of state changes.
codesandbox.io/s/framer-moti…
2
17
144
Popmotion retweeted
Remember @MengTo 's amazing 'three card drag' blur animation in SwiftUI!
Here's its React implementation using @framer motion. Those 30 loc in video is all the code you need.
At this point, I'm considering SwiftUI to be a design tool. I've been trying almost every effect so I can explain what each does and how to use them effectively for design.
6
23
217
Popmotion retweeted
Implement @reactjs drag and drop list reordering in ~130 lines with Framer Motion!
Full @codesandbox example: codesandbox.io/s/framer-moti…
4
48
457
Popmotion retweeted
Took @framer Motion for a spin and implemented a directional stagger effect in a grid 🙂. The delay is calculated based on the item position and therefore works for responsive layouts. Framer Motion is 👌. @reactjs
Demo: q416h.codesandbox.io/
Code: codesandbox.io/s/framer-moti…
3
6
49
Final one for today, we've just published a Pose migration guide! Let us know if there's anything missing.
framer.com/api/motion/migrat…
3
18
React route animations using Framer Motion and @mlfrg's Wouter. Example forked from @SimonHalimonov.
codesandbox.io/s/framer-moti…
1
3
18
Framer Motion makes CSS variable animations as simple as setting @reactjs styles.
With a single declarative animation you can drive multiple elements, with zero re-renders!
Check out the full @codesandbox example codesandbox.io/s/framer-moti…
1
7
21
Awake? Wow what an amazing coincidence, we're #5 on ProductHunt today and would love you to sprinkle some of your waking life over our upvote button.
producthunt.com/posts/framer…
10
Popmotion retweeted
Here's a link I'll be spamming today: Upvote @framer Motion on Product Hunt! producthunt.com/posts/framer…
2
16
This is easy to miss - the responsive header animation by @bouchenoiremarc on the Framer Motion homepage flexes the API - semantic markup, staggers variants, path deformation, AnimatePresence, positionTransition, probably more! All at once.
Check it out: framer.com/motion
1
4
16