Usually we start an animation when the user taps a button or something, that’s why we use onTap
. But how do we start an animation when the screen is loaded?
Use the animate
prop.
export function AnimateOnLoad(props): Override {
return {
animate: { scale: 1.5 }, }
}
Use useAnimation
hook.
import { useAnimation } from "framer"
export function AnimateOnLoad2(props): Override {
const animControl = useAnimation()
animControl.start({ scale: 1.5, rotate: 90 })
return {
animate: animControl,
}
}
Use the transition
prop:
export function AnimateOnLoad1Delayed(props): Override {
return {
animate: { scale: 1.5 },
transition: { delay: 1 }, }
}
PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!
Want the complete source file? Enter your email address below:
I'll also send you new tips when available. No spam, unsubscribe any time!