1. Tween

A simple animation that uses the default tween curve.

Code component

Just passing an object with visual properties to animate will trigger an animation.

And with the transition property, you define how things should animate. Like, for example, which duration it should have.

import * as React from "react"
import { motion } from "framer-motion"

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

Code override

import type { ComponentType } from "react"

export function Tween(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ rotate: 360 }}
                transition={{ duration: 2 }}
            />
        )
    }
}

Join the Mighty Guides mailing list    ( ± 6 emails/year )

Click the checkbox to allow us to send you emails.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.

Leave this field empty if you're human: