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
🧐 Did you know? requestAnimationFrame may be throttled by browsers.
Which, when, why:
mattperry.is/writing-code/br…
5
25
81
Popmotion retweeted
Combining SVG viewBox with Framer Motion's layout animations.
Demo: codesandbox.io/s/framer-moti… #viewBoxChallenge
Illustration by @grazsebastian
2
14
150
Popmotion retweeted
This month's @LevelUpTuts is the most jam packed course we've ever done. Every video is a different practical animation technique using Framer Motion. We're also using @codesandbox to provide easy starter repos so that we can focus 100% on the animations and skills.
3
11
50
Popmotion retweeted
🚀 Framer Motion 2.5 introduces repeat options for spring!
Using Popmotion 9's new repeat syntax, you can loop, reverse and mirror spring animations.
Demo: codesandbox.io/s/framer-moti…
5
7
74
The keyframes/spring/decay animators driving this new library are all refactored to be strictly for-t resolvers that would be just as comfortable in a worklet...
3
There's also a bunch of super-useful utility functions like interpolate, toDecimal and wrap for advanced animators. These are all individually importable and fully unit-tested!
1
3
Popmotion 9 also brings back all of the easing functions and factories. There's classics like easeInOut and anticipate but also new functions like steps and createAnticipate that create library-agnostic easing functions that will work with Popmotion, Framer Motion, Greensock etc.
1
3
This capability will be making its way to a @framer Motion near you soon.
1
4
The repeat options have been overhauled and now apply to every type of animation.
This makes it way easier to do stuff like repeat spring animations.
1
2
The main API is the new animate function. It's capable of animating a single number or string using a keyframes, spring or decay animation. Which animation it uses is automatically detected based on the provided options.
1
2
The primary design goals:
🐁 Small - Currently 6.4kb if you use *everything*
🕹 Simple - Every export is a simple function
😶 Unopinionated - No renderer, run anywhere, use custom drivers like XR devices or synchronous loops
⚖️ Stable - TypeScript, 95% test coverage
1
1
🚀 Check out the new Popmotion 9 release candidate!
github.com/Popmotion/popmoti…
Popmotion 9 is the animator's toolbox, the lodash of animation libraries.
Let's take a look at what's changed 👇
2
12
68
Popmotion retweeted
🚀 Framer Motion 2.4 introduces multi-MotionValue support for useTransform. It allows you to declaratively compose and compute multiple MotionValues into new ones.
Demo: codesandbox.io/s/framer-moti…
3
10
89
Popmotion retweeted
DID YOU KNOW that Framer Motion supports custom easing functions?
Because I did not. 🧐
Demo: codesandbox.io/s/framer-moti…
4
5
78
Popmotion retweeted
Managed to get a proof of concept for the MotionCanvas component. You can fork it from this sandbox and make your own 3D layout animations!
Demo: codesandbox.io/s/framer-moti…
Implemented using @framer Motion's layout animations and React Three Fiber.
@0xca0a made this stunning recreation of @marcinignac's original, and we're working towards an API that can mix DOM layout animations with the 3D world.
No clipping, just transforms between CSS layouts.
1
11
91
Popmotion retweeted
Implemented using @framer Motion's layout animations and React Three Fiber.
@0xca0a made this stunning recreation of @marcinignac's original, and we're working towards an API that can mix DOM layout animations with the 3D world.
No clipping, just transforms between CSS layouts.
9
58
378
Popmotion retweeted
Some hacking with React Three Fiber and Framer Motion's layout animations.
Here, we're applying Motion's layout projection calculations into the WebGL camera. This is animated entirely using inverse transforms.
w/ @bouchenoiremarc and @huntercaron
8
56
476
Popmotion retweeted
New in Framer Motion 2.3: useMotionTemplate. This allows you to combine multiple MotionValues into a single string, which is useful for animating properties like shadow. See an example below!
codesandbox.io/s/motion-230-…
4
42
333
Popmotion retweeted
🏋️♀️ Framer Motion 2.2 introduces new APIs to reduce bundle size and progressively enhance your motion components!
Learn all about them with our new bundle size guide: framer.com/api/motion/guide-…
1
10
118
This is thanks to a new update in Popmotion's style-value-types. If you use this in your own library, upgrade to style-value-types@3.1.9 to add CSS Color 4 support.
🎨 Framer Motion 2.1.3 adds support for the new whitespace syntax in CSS Color Level 4!
So you can be all "rgba(255 17 0 / 0.5)" and Motion will be like "I understand that".
Demo: codesandbox.io/s/framer-moti…
2