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 3D 🔵🔴 has arrived!
It's easier than ever to add beautiful and interactive animations to 3D scenes, with this new animation library for React Three Fiber.
Get started: framer.com/docs/three-introd…
Sandbox: codesandbox.io/s/framer-moti…
29
278
1,937
Popmotion retweeted
🚀 Framer Motion 5.4 introduces the useAnimationFrame hook. Import into any project for less than 1kb and use it to generate hand-written animations.
See how to use it to spin a CSS cube: codesandbox.io/s/useanimatio…
Docs: framer.com/docs/utilities/#u…
1
16
182
Popmotion retweeted
🚀 Framer Motion 5.3 makes scroll-triggered animations easier than ever!
The new whileInView prop can define variants to animate to/from as elements enter the viewport.
Sandbox: codesandbox.io/s/framer-moti…
Docs: framer.com/docs/gestures/#vi…
9
47
445
Popmotion retweeted
This is a pretty incredible recreation of Windows 11, built with @framer Motion! Amazing work 👏
Check out the quoted tweets for source code.
2
11
95
Popmotion retweeted
🚀 Introducing Framer Motion 5!
✅ No-code experience
✅ Drag-to-reorder components
✅ (Even) simpler shared layout animations
What's new, in depth 🧵👇
10
93
803
Popmotion retweeted
🚀 Introducing Motion One. The smallest fully-featured animation library for the web.
Built on the Web Animations API, it offers hardware accelerated animations, timelines and more, all for less than a fifth of the size of Greensock.
Check it out: motion.dev
63
598
3,344
Popmotion retweeted
😍 It's still amazing to me you can just copy/paste any Smart Component into your own @framer project.
They're real React components but can be made without any code. So tweaking animations is a breeze, though perhaps yours will be more tasteful than mine
Made a few different hamburger menu animations in @framer. Easily copy and paste one into your project and start using it. Even has some built in customization options like the radius and color.
Try & duplicate them on the Framer Showcase →
framer.com/showcase/project/…
3
32
Popmotion retweeted
Working on an official drag-to-reorder API for @framer Motion 5. For the first version it will:
↔️ Handle single axis lists
📐 Work with variable-size items
🪜 Auto-apply zIndex to the dragged item
10
23
314
Popmotion retweeted
This has been a couple months in the works by @_shuangq and me. There's a little left to do before we release Framer Motion 5 but you can already play with it today in Framer by duplicating this project: framer.com/projects/Interact…
The technical nitty-gritty 🧵
We’ve made some serious updates to Magic Motion to improve the quality, performance, and reliability of all the motion in your designs. Ready for animations that are smooth like butter? 🧈
Duplicate the file on Showcase to see what’s new: bit.ly/3zJr6Ru
4
5
89
Popmotion retweeted
In general Apple nails UI motion design, but this one is a real 🤔 as it’s actively deceiving.
Track the App Store icon with your eye as I open/close this drawer. Then do the same with Calculator. I’ve opened the wrong app on more than one occasion.
4
4
56
Popmotion retweeted
📣 Just opened a new W3C spec discussion: Provide JavaScript API for CSS easing functions
github.com/w3c/csswg-drafts/…
4
58
Popmotion retweeted
"To animate, I primarily use..."
58%
CSS transitions/animation
2%
WebAnimations API
40%
JavaScript library
576 votes • Final results
6
1
12
Popmotion retweeted
One of my favorite parts of pages is @wjosephflynn's inline expansion of images. We made extensive use of @framer motion's layout animations to achieve this effect in a performant way 👊
Thanks for all your work @mattgperry 🐐
2
5
126
Popmotion retweeted
👨🏫 New tutorial: Animate extruded text
Learn to:
🎨 Make and animate the 3D text effect using CSS
🛠 Discover and fix surprising cross-browser issues
motion.dev/post/animate-extr…
1
6
57
Popmotion retweeted
Just sent out a first-look tutorial to subscribers of motion.dev! Animate extruded text with CSS.
It's a real vertical slice of stuff I want to cover on the site. We cover performance, maintainable code and hit on some interesting cross-browser issues.
5
6
81
Popmotion retweeted
👷♂️🚧 I'm starting a new side-project! An educational resource for motion on the web.
I don't know exactly what form it'll take, but if you want to find out with me, sign up at motion.dev
14
41
321
Popmotion retweeted
How to use Framer Motion's layout animations to animate the new 📐 aspect-ratio rule.
Sandbox: codesandbox.io/s/applying-as…
(Webkit not currently supported)
6
9
85
Popmotion retweeted
🚀 Introducing Framer Motion 4!
The new LazyMotion component can help 🗜 crank your first-render bundle as low as 4.86kb. Lazy load animation and gesture functionality after first mount.
Guide: framer.com/api/motion/guide-…
👇 1/4
4
65
396