Popmotion

Simple JavaScript animation libraries for delightful interfaces. Created by @mattgperry.

[Matt Perry @mattgperry]

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?

[Matt Perry @mattgperry]

🚀 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: https://t.co/LnOGvrvxPS

[Davo @pixelbeat]

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.

https://t.co/COfxbjcHJj

[Matt Perry @mattgperry]

Putting the CSS Paint API to work in @framer

[Matt Perry @mattgperry]

👩🏼‍🔬 Ever wanted to mix AnimatePresence with @remix_run's React Router? Check out our new official example:

https://t.co/zg2bH8P5G0

[Matt Perry @mattgperry]

🚀 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: https://t.co/egfoe0s00Q
Docs: https://t.co/ZaT7xpKDKo

[Matt Perry @mattgperry]

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.

[Matt Perry @mattgperry]

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: https://t.co/1FIbEQJB8b

[Matt Perry @mattgperry]

Top JavaScript Animation Libraries ⚡

A thread 🧵👇🏻

[Matt Perry @mattgperry]

👩‍🚀 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: https://t.co/tCvj4gDJCX

[Matt Perry @mattgperry]

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

https://t.co/B4vi8B0alX

[Matt Perry @mattgperry]

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.

[Matt Perry @mattgperry]

⭕️ I've just made a new background-image + backdrop-filter effect.

Get the CSS here: https://t.co/2bN2YXyVL3

[Matt Perry @mattgperry]

#005 Spring transitions

Animate values with realistic spring physics simply by setting type="spring".

Demo: https://t.co/FVLd5RLGC3
Docs: https://t.co/jYvbfjac09

[Matt Perry @mattgperry]

🚀 Framer Motion 6.5 introduces useScroll - the easiest way to create amazing scroll-linked animations in React!

https://t.co/ML4RypLdbk

Check out this thread for details and live demos 👇

[Matt Perry @mattgperry]

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: https://t.co/3d7OT4gYLS

[Matt Perry @mattgperry]

🚀 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: https://t.co/xUaCi3lKQV

Docs: https://t.co/Zo89UtHUYk

[Matt Perry @mattgperry]

💡 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

[Matt Perry @mattgperry]

👨‍🔧 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.

[benjamin @benjaminnathan]

🫡 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: https://t.co/fNWiJvd4te