All teams want their website to feel like the products they admire. Motion that's smooth, responsive, and never overbearing. The kind of motion that conveys a feeling without a user reading a word of copy.Wanting and doing are two different things. Animation is tough for humans and agents alike to get right, and in the face of a deadlines it's often the first thing that gets cut.Animation can even be risky. Get it wrong, and the whole site feels cheaper, or performance can tank.Read the full article on Motion

The View Transition API is the most exciting new browser APIs in years. It's similar to Motion's existing layout animations, animating complex layouts that are otherwise unanimatable, but included in every browser.I love it. But I'll be honest: drinking it neat is a rough experience.Between layer name management, a pseudo-element CSS API with unpleasant and forgettable syntax, animations that snap when interrupted, blocked interaction, and shared element transitions that look weird by default, there are plenty of sharp edges.Read the full article on Motion

I'm going to show you an effect that you'll recognise immediately, perhaps without ever having paid it much attention.Take any collection of elements that react to hover: a list of menu items, swatches in a colour picker, squares in a grid. Now quickly swipe your cursor across them:In real life, your hand moves across your desk, or your finger across the screen, in a continuous, unbroken motion. But this isn't reflected in the example above. Here, lights in the path of motion are switched on seemingly at random. Move slower, and you'll see that every element lights up, and the faster you…Read the full article on Motion

The Web Animations API (WAAPI) is an animation API that's available in every browser.WAAPI's most interesting feature for developers is that it lets us animate values like transform and opacity completely off the main JavaScript thread. This means that when a user's CPU is busy with work, animations remain smooth.The downside is that, out of the box, it's missing many features that users of JavaScript animation libraries take for granted. Think interruption, default unit types, and most importantly, custom easing curves and spring animations.Read the full article on Motion

React Bits is an open-source collection of over 100 animated and interactive React components, many of which are built with Motion. Its focus on creativity and experimental design separates it in a world crowded with an abundance of <Button> components.It recently crossed 30k stars on GitHub, and now with React Bits Pro on the horizon we felt like it's a good time to chat to David Haz, its creator.David Haz: I think that’s the first time someone has ever called me “prolific”!Read the full article on Motion

Carousels are a cornerstone of web design, but over the years they've proven difficult to get right. Between CSS limitations and clunky JS gestures, building a carousel that feels fluid, scrolls infinitely, looks great, and offers a flexible developer experience is one of the most deceptively complicated challenges in web UX.Today, we're launching the Motion+ Carousel for React. It's a new component that makes it easy to build performant, accessible, and fully-featured carousels.The perfect carousel is a personal white whale of mine.Read the full article on Motion

It's been one year since Framer Motion became Motion, as both an independent library, and independent company.To set me up for success, my initial agreement with Framer provided sponsorship for 12 months in return for technical support. This was a predictable and therefore nerve-calming income, essential when taking a leap like this (especially as a new father!)We've since agreed to continue collaboration for another year. But, without the benefit of hindsight, the game was set: I had 12 months to flip a successful OSS library into a successful business that could survive even if that income…Read the full article on Motion

Animation performance is one of the topics I'm asked about the most. It makes sense - the whole reason we make animated UIs is so they feel smooth and responsive. If these animations don't perform well, they become actively harmful to the overall experience.But performance can often feel like a dark art. It's a broad topic, extremely nuanced, and full of trade-offs.In this article, I'm sharing everything I know about animation performance on the web. We'll cover it all - when to use will-change (and when to not), why CSS variables are bad actually, what hardware acceleration means…Read the full article on Motion

Love them or hate them, tickers (or for us oldies, "marquees") have been growing in popularity over the last few years as a dynamic design element.Today, we're launching the Motion+ Ticker for React, a new creative component for quickly building accessible and performant tickers.So what makes this ticker different? How does it improve on traditional CSS approaches? Let's dive in.Read the full article on Motion

Motion+ Cursor is a creative cursor component for React and Vue. Its simple API makes it quick to spin up cursor effects of any kind, from floating tooltips, image previews, to entire cursor replacements.Today, we're adding two powerful new features to allow your cursors to react dynamically to your site content: Magnetic cursors and cursor zones.Magnetic cursors allow your custom cursor to snap to a pointer target.Read the full article on Motion

Rockstar has launched the new GTA VI website and it's a stunner. In particular, it uses scroll animations in a surprisingly engaging way, with some lovely gradients and masking. Check it out!Obviously, when I see animations like this, the first thing I do is dig into the code to see if they're using Motion. In this case, Rockstar went with GSAP. And I'm not bitter about it! No way. Not this guy.That said, I've been looking for a good hook to write about how Motion uses render batching and native browser APIs to improve performance. This is a great example, not only because it's timely, but…Read the full article on Motion

At 9am this morning I had the privilege of closing our oldest open ticket, one that's haunted the issues board since the days of Framer Motion, all the way back in February 2020.It was titled "[FEATURE] Vue support?"Yes, today I'm thrilled to finally announce Motion for Vue. An animation library that's simple to start and fun to master, its unique hybrid engine combining the performance of hardware accelerated browser APIs with the limitless potential of JavaScript.Read the full article on Motion

Since its inception over 12(!) years ago, there's been a glaring animation-sized hole in React's API.Over the years its closest competitors, like Vue and Svelte, have introduced APIs that make animations a little easier. Whereas React developers have had to rely on third-party libraries like Motion for React or others.Until now.Read the full article on Motion

On the old Framer Motion docs, the top request from visitors was search functionality. When making the new Motion homepage I knew that search was a must-have. The new site is built with Framer, so adding search is as simple as a drag and drop.No more excuses.So I dragged and dropped, and patted myself on the back thinking that would be the end of it.Read the full article on Motion

First, some personal news: Next week will be my last at Framer.Writing that feels pretty wild. Making Framer Motion has been the best job of my life. To do so for six years within the best product team in the world, both a massive learning experience and a privilege.However, that leads to some news that I'm incredibly excited to share.Read the full article on Motion

Update 12/11/24: Framer Motion is now Motion for React. Some of the references on this page will be outdated. Read the announcement.Time flies: I released the first version of Framer Motion over five years ago. My goal was (and still is) to make an API that is simpler than animating with CSS, but with all advanced capabilities of a JS library.Animation in CSS has always been limited, often in surprising ways. For example, with CSS it's always been impossible to animate elements when they enter the DOM. With Framer Motion, it's as simple as:Read the full article on Motion

requestAnimationFrame (rAF) is a browser API that allows the execution of code before the next available frame on the device display.Most JavaScript animation libraries use this API to change the visual properties of DOM elements, 3D models, or canvas contexts to create motion on the web.However, it isn't a guarantee that this method will run before every frame. A browser might choose to run requestAnimationFrame at lower intervals, and this leads to jerky animations.Read the full article on Motion