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
🌈 Text gradients have arrived in @framer!
Simply draw and publish, no need to bother with weird text gradient CSS! I've been working on this on and off for a few weeks so it's amazing to finally land.
Publish to your free site: framer.com
ALT Screenshot of the new text gradients feature in Framer
1
8
131
Popmotion retweeted
Framer blew my mind yesterday, hours before launch: Ten or so people in the same project, tweaking copy, design, a11y. It felt collaborative and visceral in a way code never has or perhaps even could.
It's now on Product Hunt! producthunt.com/posts/framer…
1
6
72
Popmotion retweeted
Design and publish websites faster than ever before. Meet the new Framer. Featuring breakpoints, effects, CMS, styles, and so much more. framer.com/launch/?utm_sourc…
26
124
960
Popmotion retweeted
A few hours of fun creating vector shapes and making a little site with @framer. Copy-paste your SVG!🔸
Check it out → shapes.framer.website/
18
35
485
Popmotion retweeted
꩜ Here's two approaches to Motion Path animations in Framer Motion
1. CSS offset-path: codesandbox.io/s/framer-moti…
2. SVG getPointAtLength: codesandbox.io/s/framer-moti…
offset-path isn't yet supported in Safari but getPointAtLength is more code & more measurements ⚖️
6
59
Popmotion retweeted
✨ It doesn’t matter if you are launching a product, setting up internal documentation, finally getting around to redesigning your portfolio, or building an over-the-top animated feature page (like we just did). It can all be done in the new Framer Beta → framer.com/sites/usecases/?u…
6
12
160
Popmotion retweeted
I've just published a new version of our Framer Motion accessibility guide! 📕
framer.com/docs/guide-access…
Learn how to reduce motion sickness with a simple prop, or use a hook to turn off parallax and autoplaying videos. [1/5]
1
10
81
Popmotion retweeted
💡 Hardware-accelerated CSS and WAAPI animations should be considered *progressive enhancement*, rather than mandatory. Why? One word, that you're probably sick of hearing:
Safari. 🧵 [1/6]
4
52
343
Popmotion retweeted
"Acceleration" here means the animation runs on the compositor thread and can't be blocked by other JS on the page. I wasn't aware of these bail-out cases.
Safari uses Apple's Core Animation for accelerated animations, the API that powers animations across iOS and macOS.
This means that if Core Animation doesn't support a feature, Safari bails the animation out of acceleration. The list of unsupported features is extensive:
1
5
33
Popmotion retweeted
🥁 I had so much fun building this app landing page in @framer. It’s responsive and contains fun animations; everything was made on the canvas. The website is available as a template. Grab it at bit.ly/3r1Xjlb. I’ve collected my favorite details in the thread below (1/6)
9
22
347
Popmotion retweeted
🤖 Need to ship a product landing page? Here’s a perfect template for you. It features rich animations, scroll-effects and is fully responsive. See it in action at bit.ly/33ZaeLT. Or check out some highlights below… (1/6)
12
14
123
Popmotion retweeted
🌍 Framer Motion 6.2 makes animation a11y more accessible than ever!
The new reducedMotion prop in MotionConfig lets you adhere to a user's "reduced motion" preference by disabling all transform & layout animations.
Sandbox: codesandbox.io/s/framer-moti…
Docs: framer.com/docs/motion-confi…
3
8
90
Popmotion retweeted
🚀 Framer Motion 6.1 lets you create custom IntersectionObserver fallback behaviour.
This "load more" button uses both onViewportEnter and onClick to fetch more items.
Progressively enhanced infinite scrolling in just one line of JSX: codesandbox.io/s/framer-moti…
7
17
114
Popmotion retweeted
🔥 Design real websites right on the canvas. Publish in seconds. All with blazing fast performance. We’re shipping a new version of Framer, and we would love your help. Learn more at bit.ly/framer-beta and check the thread (1/6)
105
383
2,655
Popmotion retweeted
Here's one approach to animating morphing SVG paths with Framer Motion. We make a custom useFlubber hook to repackage @veltman's amazing Flubber library into a MotionValue.
Sandbox: codesandbox.io/s/framer-moti…
Flubber: github.com/veltman/flubber
2
11
82
Popmotion retweeted
Just taken a crack at porting @0xca0a's gorgeous switch example to Framer Motion's variants: codesandbox.io/s/framer-moti…
3
30
315
Popmotion retweeted
Playing around with a "reveal" mode for an upcoming <LayoutSVG />
Here we've got four SVGs, each containing the same illustration, performing size/position layout animations, using viewBox to counter the scale distortion
2
6
83
Popmotion retweeted
🚀 Another new camera for Framer Motion 3D: <LayoutOrthographicCamera />
Mix your isometric and other orthographic 3D scenes seamlessly with your layout animations, like in this flexbox ↔️ fixed example.
Sandbox: codesandbox.io/s/framer-moti…
Docs: framer.com/docs/layoutorthog…
1
7
85
Popmotion retweeted
⭐️ New Framer Motion 3D demo by @edoardomercati and myself! We blend CSS filters and 3D models to transition from this silhouette into a fully rendered star.
Sandbox: codesandbox.io/s/framer-moti…
5
20
288
Popmotion retweeted
🚀 Introducing <LayoutCamera />
A powerful new camera in Framer Motion 3D that combines DOM layout animations with @threejs. Animate page layout and 3D scenes with zero distortion.
Sandbox: codesandbox.io/s/framer-moti…
Docs: framer.com/docs/layoutcamera…
13
72
810