Popmotion

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?

🚀 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: #hardware-accelerated-animations" target="_blank" rel="nofollow noopener">framer.com/docs/animation…

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

Putting the CSS Paint API to work in @framer

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

🚀 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: #mode" target="_blank" rel="nofollow noopener">framer.com/docs/animate-p…

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.

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…

Top JavaScript Animation Libraries ⚡ A thread 🧵👇🏻

👩‍🚀 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…

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…

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.

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

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

🚀 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 👇

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…

🚀 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…

💡 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

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

🫡 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