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

London, England
How do you animate reordering items with React Pose, with FLIP optimisations?
1
6
19
📝 New blog: Introducing Pose 3.0 Take a look at our new UI events, pose resolution technique, breaking changes and a brief look at what's next! popmotion.io/blog/20180820-i…
1
5
23
🚀 Pose has a new examples section! Find examples for all our new UI events, React Pose Text, and CSS filters, with more to come over the coming weeks. All totally forkable, thanks to @codesandboxapp popmotion.io/pose/examples/
2
14
There's also a new pose resolution technique which works a little more like CSS than a traditional state machine. But you can't make a gif out of that.
1
2
🚀 Pose 3.0 is out with new UI event handlers! Drag is joined by Press, Focus and Hover. Take a look with our new UI events tutorial. popmotion.io/pose/learn/ui-e…
1
6
35
Pose will now handle all that potential messiness, and in code, the above interaction looks like this:
1
1
13
But then you drag quick enough that the hover status switches on and off. If you're not careful, the hoverEnd and the hoverStart animations would play, overriding the drag animation. Then you stop dragging, but you're still hovering. What animation plays? 2/3
1
2
Coming very soon to Pose: Hover events! It was more complicated than I anticipated. Imagine this situation, with an element that is both draggable and hoverable. You hover over: hoverStart animation plays. You mousedown drag: dragStart animation plays. 1/3
1
1
10
Just published our first Patreon-exclusive update! An early look at our upcoming examples section, starting with an example of animating CSS filter in React Pose
1
1
7
Popmotion retweeted
Animations can bring your application to life and creating them doesn't have to be daunting. Learn how to create animations in #React using #PopmotionPose with our new blog post: buff.ly/2KYmXyU #TheRangleBlog
5
20
🚀 @popmotion/easing 1.0.0 Stand-alone easings (including cubic-bezier), plus special easing generator and modification functions, now available as a stand-alone library, for use in any animation library! popmotion.io/api/easing/ Thanks for @AndaristRake
1
11
🎉 Popmotion is now on @opencollect! A few people expressed their preference for Open Collective, so we're offering all the same tiers and benefits to OC backers! opencollective.com/popmotion
1
3
9
Because words and characters become posed components, we can use all of Pose's normal features. We can even use Pose's pointer events, like draggable. In this example, words are draggable and characters animate with spring while their parent is dragged!
2
8
🚀 Introducing React Pose Text A text-splitting component that makes it easy to split text into posed words and characters! Released under GPLv3, with a permissive, commercial license exclusive to backers! popmotion.io/pose/api/react-…
1
3
15
4 hours, 4 backers. That's really very cool - I look a bit like this 😃 but probably more gormless. I've added the backers list to our repo. github.com/Popmotion/popmoti…
1
4
A few shameless CCs: @dan_abramov @kenwheeler @sophiebits Doubling down on React animation over the next few months!
4
Big shout out to my mum for being my first Patreon✌️
9
In this time you're going to see: - A big emphasis on React Pose - New, premium React Pose components with Patreon-exclusive commercial licenses - Popmotion becoming a place where anyone can learn about UI animation, with early access materials for backers
1
7
This is the big news: Popmotion is now on Patreon! patreon.com/popmotion I've got a super-exciting three months working exclusively on Popmotion and Pose, and beyond that I'll be using Patreon funding to help keep it sustainable.
5
10
56
, the library formerly known as Popmotion
6