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.
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.
