Framer X » Animation » Example animations

Example animations

For the launch of Framer’s animation API, Benjamin den Boer released a project with 30 example animations. And later, he shared 20 Framer Motion examples.

I took those animations and translated them into different versions:

  • I made Framer Motion versions of the original Code components,
  • recreated the Framer Motion animations as Code components,
  • and also made an Overrides version of each animation.

Here’s my remix of Benjamin’s examples: all the animations together (with a few exceptions) in those three formats.

Example animations – Code Components, Framer Motion, & Overrides.framerx
download this project

 

Thanks to Framer Motion, we can now include animations in webpages. So each page contains a live example, like this one:

 

Some animations are triggered by a mouse hover, like the whileHover example below. These don’t work on touch devices, so when you’re on a phone or tablet, you’ll see a GIF instead of the live animation.

Differences between the versions

The Code component version will contain Frames, the Framer Motion version Motion Divs, and the version using Overrides will work with what’s drawn on the Canvas.

Code Component

Here’s that first animation again, as a Code component based on a <Frame>:

import * as React from "react"
import { Frame } from "framer"

export function CC01Animate() {
    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            backgroundColor="#fff"
            center
            // Animation
            animate={{ rotate: 360 }}
            transition={{ duration: 2 }}
        />
    )
}

In the examples on the next pages, I’ll omit the imports at the top. Those are often the same anyway, and you always check the .tsx file to see all the code.

Framer Motion

Naturally, the Framer Motion examples are also code components. The only difference is that they use <motion.div>s instead of <Frame>s.

A motion.div doesn’t have all the fancy properties of a Frame, so you’ll have to set its CSS properties on style, like you would with any other Div.

import * as React from "react"
import { motion } from "framer"
import { Center } from "./center"

export function FM01Animate() {
    return (
        <Center>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                }}
                animate={{ rotate: 360 }}
                transition={{ duration: 2 }}
            />
        </Center>
    )
}

But at the same time, a motion.div does have animate, transition, drag, etc. These extra properties make the animation magic work.

 

A motion.div doesn’t have a Frame’s handy center property, so most examples are wrapped in a <Center> component.

Here it is. It’s just a Flexbox <div> that centers its content:

export function Center(props) {
    return (
        <div
            style={{
                width: "100%",
                height: "100%",
                display: "flex",
                placeItems: "center",
                placeContent: "center",
            }}
        >
            {props.children}
        </div>
    )
}

 Importing the motion library

The motion library is part of the Framer library, so that’s how I import in the examples:

import { motion } from "framer"

But when using the same animations on the web, you’ll have to get motion from the Framer Motion library:

import { motion } from "framer-motion";

Page and Scroll

Framer Motion doesn’t have a Page component, so I couldn’t recreate the examples that use it: 14, 15, 16, and 19.

And it doesn’t have a Scroll component either. But a motion.div can be made draggable, so it wasn’t too hard to recreate a Scroll.

Overrides

The Overrides version will almost always be the shortest one, simply because the Frame or Div doesn’t need to be drawn. (It already exists on the Canvas.)

import { Override } from "framer"

export function Animate(): Override {
    return {
        animate: { rotate: 360 },
        transition: { duration: 2 },
    }
}

Things get a bit more complicated when there’s more than one Frame because you’ll then have to use a Data object to communicate between different overrides. (Sometimes a motionValue() suffices.)

But when there are many Frames, it’s often not worth it. I didn’t even try to recreate examples 35 and 36 because it would result in even more code than the Framer Motion and Code Component versions.