Home
Topics
Framer Motion

Learn more about Framer Motion

Framer Motion is an animation library for React that allows for declarative animations and transitions. It's powerful and feels familiar thanks to its understandable concepts that fit perfectly with React.

A screenshot of a browser window with a white page with the title "Framer Motion: Using `whileInView`"

Animate when scrolled into view

Triggering animations on scroll with Framer Motion

Learn how to use whileInView in Framer Motion for animation in React

The image gallery we'll add animations to with Framer Motion

Create an image gallery in Framer Motion

Animating between components in React

A simple interaction where the user can click on an image on the right side and it will expand over to the left, becoming the primary image. This technique could be used as an image gallery or a product chooser for an ecommerce site.

A screenshot of a marketing page with the title "The only Todo App you'll ever need"

Page Transitions in Next.js with Framer Motion

Using AnimateSharedLayout in Next.js

Create shared layout transitions with Framer Motion on a Next.js app in a few minutes

How to animate scroll position in React

Make delightful animations with useViewportScroll

Making Magic in Framer Motion 2

Take a look at the upcoming version of Framer Motion and see how you can create compelling animations in React.

circle loader animation, three frames of circle loading animation

Spinner Animation in React

How to use Framer Motion to create a custom loading spinner animation

Make a custom circle loading animation in React with Framer Motion.

A series of four images from left to right, dog, sea bird flying, white goat and raven

Tap to Expand

Hero animations and animating between different view states can be done easily with the useCycle react hook in Framer Motion and a bit of time.

Framer Motion Bouncing Ball Animation

Create a bouncing animation in React

A title card showing three animation states on a blue background with Seth Corker in the corner

A simple loading animation with Framer Motion

Animation in React doesn't have to be difficult

Make a loading animation in React that's fully customisable with Framer Motion, an animation library that's easy to use and very powerful.

Cartoon person meditating with abstract shapes surrounding them

Page Transitions in React Router with Framer Motion

Animate transitions easily in React

Transitions in React Router doesn't have to be difficult. Let's make a page transition with Framer Motion.

Coding in Framer series

Watch my free tutorial series on how to get started coding in Framer.
We'll use the popular design and prototyping Framer Web to craft beautiful user interfaces but we'll make them more rich and interactive with code. I'll take you from your first code component in React, smooth animations with Framer Motion and handoff into a code project.

Code Components - 1

Create your first code component from scratch in Framer Web. This tutorial will…

Property Controls - 2

Use property controls to make your code components in Framer Web more flexible.…

Interactions & Overrides - 3

Learn how to turn design elements and code components in Framer Web into interac…

Animations & Overrides - 4

Framer Web excels at providing easy ways to animate components. We’ll create tra…

Designing with Data - 5

Create complex interactions by leveraging the Data instance in the Framer API. D…

Handing off to Framer Motion - 6

Your prototype in Framer Web can make the leap into a codebase. Web developers c…

)