1. Animate
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
the animation should have.
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 }}
/>
)
}
Framer Motion
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>
)
}
Override
import { Override } from "framer"
export function Animate(): Override {
return {
animate: { rotate: 360 },
transition: { duration: 2 },
}
}