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
Same as in immer, if you have a hook-effect that could be a one-liner but would now stretch into bracket scope since effects evaluate return values, the void keyword terminates all risks and side-effects. Guess everyone knew that, i was 4 years into JS until discovering it 😑
5
15
72
Great talk by @miuki_miu showing how flexible SVG components are as React components. Encourage you to watch it when the videos up. Some delightful use of Popmotion in there too!
1
4
17
Popmotion retweeted
The autoFocus property is helpful for more than just focusing an element on page load. Here's an example in React using @popmotionjs PoseGroup + autoFocus to focus an input when it enters the DOM: codesandbox.io/s/q39oyzjr56
2
6
38
Popmotion retweeted
I'm so proud to finally release VSCode in CodeSandbox!
We now run a big chunk of @code directly in the browser, so you get:
⌨️ VSCode Keybindings
📋 User Snippets
🎞️ Grid View
🍞 Breadcrumbs
❔ Support for Untitled Files
⚙️ Your exact VSCode Preferences in CodeSandbox
+ more!
102
899
3,029
Popmotion retweeted
Played around with @popmotionjs this week. Super impressed with how easy it makes animating page transitions with a @gatsbyjs website. 😍 Can't wait to do more with it. ryanwiemer.com/
1
6
58
Popmotion retweeted
Yaaaaassss, it's ALIVE! I'm finally able to reverse the transition according to the previous / next location so we can have a feeling of hierarchy. #reactjs
6
3
26
Popmotion retweeted
I love how intuitive @popmotionjs is for what would normally be a complex animation codesandbox.io/s/1o46y4qxw7 the primitives in react-pose are so solid 🤩
1
10
66
Popmotion retweeted
#FramerXTip: Make a button/card with on hover state, Method 3: pose
- yarn add react-pose
- const Box = posed.div({
hoverable: true,
init: {...},
hover: {...}
}
Code: dropbox.com/s/ihf7alj6fq87gp…
Check out pose for more cool animations: popmotion.io/pose/
1
4
36
Popmotion retweeted
I’m incredibly excited to be speaking at #ReactConf2018 about declarative animation!
conf.reactjs.org/speakers.ht…
3
1
25
🚀 🍿 Introducing Popcorn! It's Lodash, for animation.
popmotion.io/popcorn
Features:
- Tiny, individually importable functions
- Interpolate from numbers to colors/units/complex strings
- Linear RGB color mixing avoids brightness dips
- More to come!
4
48
176
Popmotion retweeted
Medium have a beautiful zoom effect on their images. This article will show you how to mimic this effect using #VueJS and the Pose animation library. @popmotionjs buff.ly/2QFdbWI
8
32
🎉 Framesync 4 is requestAnimationFrame on steroids.
Just 0.7kb, it separates rAF into distinct read, update and render steps to guarantee order of execution and prevent layout thrashing.
It's also the secret sauce behind Popmotion's ability to independently animate transforms!
1
4
30
🎉 Pose for @reactjs 3.3.1 fixes a common problem with components that manage enter/exit animations. Usually, React won't update exiting components with the latest props. By passing props to PoseGroup instead, we can dynamically generate animations even on exiting components
2
2
26
FLIP animations in @reactjs Native are turning out better than I'd expected.
Minimal visual artefacts (but occasionally some). Though a hard limitation of FLIPing during another FLIP, due to the fact we don't know what the current x/y transform is. Movement only for now.
2
25
Features:
- Animate components as they enter and exit the tree.
- Optionally animate everything out before animating anything in.
- `Transition` forwards props to children, so you can dynamically animate children even when they've been removed from the tree.
(2/2)
1
2
🚀 Pose for @reactjs Native introduces the Transition component!
popmotion.io/pose/api/native…
(1/2)
1
1
13