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
🚀 Framer Motion 3.10 introduces useVelocity!
Compose dynamic animations from velocity. Here we're using it to transform pointer velocity into scale and backgroundColor: codesandbox.io/s/framer-moti…
Docs: framer.com/api/motion/motion…
6
7
112
Popmotion retweeted
For the @framer hackathon @bouchenoiremarc and I have been taking another look at Framer Motion 3D. So far we've got variant and gesture animations, and AnimatePresence support in there.
11
9
148
Popmotion retweeted
🚀 Framer Motion 3.7 introduces the new motion() syntax, a simpler way to make custom motion components.
Use it to animate any React component that forwards its ref prop to a DOM element. Or pass a string to animate custom DOM elements!
Learn more: framer.com/api/motion/compon…
3
19
190
Popmotion retweeted
Introducing Smart Components, a new standard for interactive component design. From full navigations and buttons with multiple states to nested hover effects, design components with infinite permutations in just a few clicks—no code required.
Read more — bit.ly/3j8PkgN
5
52
298
These improvements have also landed in style-value-types and popmotion packages!
🚀 Framer Motion 3.2 introduces some value type QoL improvements:
🎨 Support for alpha in hex values (RGBA and RRGGBBAA)
🕶 Correct defaults for individual filters
🧮 Better detection of leading-decimal numbers within (.5px) complex strings
2
Popmotion retweeted
🚀 Framer Motion 3.2 introduces some value type QoL improvements:
🎨 Support for alpha in hex values (RGBA and RRGGBBAA)
🕶 Correct defaults for individual filters
🧮 Better detection of leading-decimal numbers within (.5px) complex strings
1
3
59
Popmotion retweeted
🚀 Introducing Projection, a new and experimental low-level layout projection library!
This is very early work (started yesterday) so expect bugs and rapid breaking changes!
Vanilla demo: codesandbox.io/s/floral-frog…
Repo: github.com/Popmotion/popmoti…
6
31
250
Popmotion retweeted
🚀 Framer Motion 3.1 introduces whileFocus!
Thanks to an excellent PR by @Omarcodess, it's now daft simple to animate to a state while an element has focus.
Check out this idea for some simple validation indication codesandbox.io/s/framer-moti…
4
8
132
Popmotion retweeted
This is an excellent introduction to Framer Motion! I appreciate MotionValues are introduced as an integral part of the API in a simple way, as IMO they're a simple concept can scale in complexity to breaking open the back door into being able to do literally anything with Motion
📝 New Blog Post: "Guide to creating animations that spark joy with Framer Motion"
Getting started with animations can be overwhelming so I created this little guide with fun examples to introduce you to everything I've learned about Framer Motion ✨
blog.maximeheckel.com/posts/…
1
2
17
Popmotion retweeted
Variants & Variables are here 💥
Build real interactive components that contain their own visual states, custom properties, and interactions—without using any code.
Try this beta feature in Framer — bit.ly/2KuszGB
4
27
236
This one's for the DOM and animation nerds. A full technical deep dive into Framer Motion's (Popmotion-powered!) layout animations
🤔 How do Framer Motion's layout animations work?
I've written a deep dive on layout projection, a method for animating browser layouts at 60fps:
mattperry.is/writing-code/la…
TLDR? Watch the talk at Next.js Conf, Stage E, today at:
🇪🇺 19:30 CET
🇺🇸 11:30am PST
1
4
Popmotion retweeted
🚀 Introducing Popmotion 9
The motion library behind the Motion library, the lodash of animation. Popmotion 9 is simple, powerful, low level, stable, and tiny.
popmotion.io
7
35
253
The new bundle size reduction capabilities in Framer Motion allow you to load Popmotion asynchronously, after your main content has rendered. One of the benefits of placing a declarative API on top of an imperative library.
🚀 Size is a feature, and Framer Motion 2.9.0 is an internal refactor that allows you to achieve massive bundle size reductions!
Learn how to progressively enhance motion components with the bundle size guide: framer.com/api/motion/guide-…
3
Popmotion retweeted
🚀 Framer Motion 2.8.0 introduces the low-level animate function. Ideal for directly animating a single value or MotionValue. For advanced use-cases, it allows you to animate state, or animate MotionValues without binding them to a motion component.
Docs: framer.com/api/motion/utilit…
3
14
119
Popmotion retweeted
Framer Motion has always blocked 👉 touch scrolling from draggable elements, now in 2.7.3 it *only* blocks scrolling on the draggable axis! This is great for stuff like carousels, where x gestures should drag and y gestures should scroll.
2
9
146
Powered by the duration-based springs in the latest Popmotion 9 RC!
🚀 Framer Motion 2.7.0 introduces duration-based springs! Precisely set the length and feel of spring animation with the new duration and bounce options.
Demo: codesandbox.io/s/framer-moti…
Docs: framer.com/api/motion/types/…
🧐 This might open the door for spring keyframes in the future?
1
Popmotion retweeted
I watched this video by @jlengstorf & @mattgperry about Framer Motion because a lot of folks recommended that library
It looks awesome! 🔥
I'll definitely start using it. Probably for my personal website ✨
🔗 youtube.com/watch?v=L_pmBi3m…
#javascript #reactjs #animation
7
13
Popmotion retweeted
Logical assignment operators are new sprinkles of syntactic sugar that enjoy wide browser support.
Here's what they are and how to use them:
mattperry.is/writing-code/wh…
1
3
20
Popmotion retweeted
I've been dropping a bunch of ??s in my code recently so I've written a quick introduction to the newish nullish coalescing operator.
mattperry.is/writing-code/wh…
3
7
25
Popmotion retweeted
Pages have just landed in Framer. You can use pages to organize your designs across multiple canvases within a Framer project. Set up different pages solely for experimentation, importing, or final designs. Learn more about this new feature — bit.ly/2YTE4vD
9
34
183