Framer Motion Examples

Tes Mat

Framer Developer
Framer
React

I gathered 423 Framer and Framer Motion examples and saved them all on this website in Framer’s CMS. I made it possible to search for a combination of things (which format, API used, etc.) by searching the CMS with code overrides.

Selecting which projects use a certain Framer Motion API.

Which Framer Motion examples does it have?

It has all the examples from the official Framer Motion 

documentation

 and many more made by 

Matt Perry

. Plus, a few made by other folks. All these are freely accessible.

It also contains (almost) all the examples from my Framer Motion course, 

The Mighty Motion Guide

, and my Framer course, 

The Framer Book

. So, people with a subscription can more easily find an example (a bunch of these are also free).

You can search by source (from the docs, by Matt, from one of the courses) or for a combination of sources, like 

examples from the docs not made by Matt

 (not so many).

Different formats

Most examples are inside a

React

project in a

CodeSandbox

.

But there are also examples made inside Framer, as a Framer

code component

or with

code overrides

.

Some examples even exist in

all three formats

.

Pick your API

You can search which Framer Motion APIs examples use; for example, does it use Dragging, Animate Presence, Variants, Gesture Animations, etc?

It also works with combinations, so you can find examples using

Animate Presence and a Shared Layout Animation

.

When you pick just one API, you’ll have a small explanation at the top of the examples list, with links to the Framer Motion docs, the Mighty Motion Guide, and the Framer Book.

Framer examples

You can also search for Framer examples; these are all from the Framer Book and deal with how to make

code components

and

code overrides

inside Framer.

Partner With Tes
View Services

More Projects by Tes