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.

📘 The Framer book – 💫 Example animations.framerx

 

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 can always check out the entire code in the .tsx file.

Framer Motion

The Framer Motion examples are included in the Framer project, as code components that use <motion.div>s. And there’s also a CodeSandbox version of each animation.

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>
    )
}

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.

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 component is part of the Framer library, so that’s how I import it in the examples:

import { motion } from "framer"

But when using motion elements on the web, you’ll have to get it 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’s easy to create a scrollable div that has the same inertia animations as Framer’s component. (Examples 17, 18, 20, and 35)

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

Leave a Reply