Popmotion @popmotionjs

Simple JavaScript animation libraries for delightful interfaces. Created by @mattgperry. popmotion.io London, England Joined July 2015

Tweets

2K
Followers

2K
Following

92
Likes

1K

Matt Perry @mattgperry

3 years ago

The Appear Effects optimisation has arrived in @framer! It brings huge SEO and user benefits with Lighthouse scores way up and perceived loading times way down. Framer Motion spring animations *before* React has hydrated the page. Well how does that work then?

benjamin @benjaminnathan

3 years ago

5 10 221 63K 24

Download Video

2 4 70 16K 13

Matt Perry @mattgperry

3 years ago

🚀 Introducing hardware-accelerated animations in @framer Motion! The new hybrid engine mixes the power of JS animations with the performance of native. Starting with "opacity", it will automatically run animations on the GPU when possible. Learn more: framer.com/docs/animation…

9 33 314 0 34

Download Video

Davo @pixelbeat

3 years ago

WIP, I'm recreating the @Apple iPod Pro landing page in @framer. It's unfinished and it has a ton of layout bugs, but it's getting there and it's such a rewarding exercise. I have 2 sections (Hero + Value Props) and 7 more to go. ipod-pro.framer.website

19 26 384 0 79

Download Video

Matt Perry @mattgperry

3 years ago

Putting the CSS Paint API to work in @framer

4 4 66 0 7

Download Video

Matt Perry @mattgperry

3 years ago

👩🏼‍🔬 Ever wanted to mix AnimatePresence with @remix_run's React Router? Check out our new official example: codesandbox.io/s/framer-motio…

1 5 62 0 12

Download Video

Matt Perry @mattgperry

3 years ago

🚀 Pop pop! Framer Motion 7.2 introduces the "popLayout" mode to AnimatePresence. In this mode, exiting elements will be popped from the page layout, allowing surrounding elements to animate into place immediately. Sandbox: codesandbox.io/s/framer-motio… Docs: framer.com/docs/animate-p…

13 75 618 0 111

Download Video

Matt Perry @mattgperry

3 years ago

Perforated <div />, etched frosted <footer /> and I don't even know what the third one is. Some digital materials from recent sandboxes, using a mixture of backdrop-filter, background and mask-image.

2 12 171 0 39

Download Image

Matt Perry @mattgperry

3 years ago

I got nerdsniped on our @framer Discord and now here's an example of dynamically adjusting ticker speed based on scroll velocity. A true useScroll x useSpring x useVelocity x useTransform x useAnimationFrame collab: codesandbox.io/s/framer-motio…

1 9 109 0 27

Download Video

Matt Perry @mattgperry

3 years ago

Top JavaScript Animation Libraries ⚡ A thread 🧵👇🏻

5 13 162 0 60

Matt Perry @mattgperry

3 years ago

👩‍🚀 Ever wanted to transform an element without transforming its child? It's possible! Once per frame, calculate the inverse of each transform (100px becomes -100px etc) and apply to the child in reverse order. Here's how to do it with Framer Motion: codesandbox.io/s/framer-motio…

2 16 177 0 50

Download Video

Matt Perry @mattgperry

3 years ago

New to @framer Motion? I'm refreshing our examples over the following weeks, starting from the absolute basics through to more advanced examples. And I'll be posting them all in this thread! #001: Enter animation codesandbox.io/s/framer-motio…

4 24 323 0 122

Download Video

Matt Perry @mattgperry

3 years ago

Five years ago I wrote a guide called "Create the Perfect Carousel". In retrospect it was anything but! With the new Carousel and Ticker components for @framer, there's at least one thing that actually is perfect: The creative process! Just drag, drop, and link.

benjamin @benjaminnathan

3 years ago

12 18 148 0 18

Download Video

2 5 60 0 10

Download Video

Matt Perry @mattgperry

3 years ago

⭕️ I've just made a new background-image + backdrop-filter effect. Get the CSS here: codesandbox.io/s/framer-motio…

1 4 83 0 18

Download Video

Matt Perry @mattgperry

3 years ago

#005 Spring transitions Animate values with realistic spring physics simply by setting type="spring". Demo: codesandbox.io/s/framer-motio… Docs: framer.com/docs/transitio…

1 1 13 0 1

Download Video

Matt Perry @mattgperry

3 years ago

🚀 Framer Motion 6.5 introduces useScroll - the easiest way to create amazing scroll-linked animations in React! framer.com/docs/use-scrol… Check out this thread for details and live demos 👇

9 31 272 0 68

Download Video

Matt Perry @mattgperry

3 years ago

Currently doing a pass on the Framer Motion docs, surfacing some things that are currently buried within bigger pages and adding more explanation/examples. For instance, there's useAnimationFrame, super low-level frame loop: framer.com/docs/use-anima…

3 8 57 0 12

Download Video

Matt Perry @mattgperry

3 years ago

🚀 Framer Motion 6.4 introduces useInView! This 0.6kb fat-free utility hook simply returns true when an element is within the viewport. No <motion.div /> necessary, here it is triggering CSS transitions: codesandbox.io/s/cool-breeze-… Docs: framer.com/docs/use-in-vi…

11 52 419 0 75

Download Video

Matt Perry @mattgperry

3 years ago

💡 When animating an SVG path with stroke-linecap set to "round", have you ever noticed that even if the path length is set to 0, you can see still this annoying circle? 1/2

2 6 87 0 19

Download Video

Matt Perry @mattgperry

3 years ago

👨‍🔧 Just released an interesting bug fix for mixing rotation and layout animations in Framer Motion. In this video, the grey container is animating height via scale, which distorts its children. We usually correct for this, but these rotating children are still stretching.

2 4 61 0 10

Download Video

benjamin @benjaminnathan

3 years ago

🫡 I’ve created a new starter template you can use for your next personal website and blog in @framer. Fast, reliable and highly customizable. Remix link can be found on the home page. Try the demo here: blog.framer.wiki