Play an animation on load, not just onTap

Overview

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?

Solution 1

Use the animate prop.

export function AnimateOnLoad(props): Override {
    return {
        animate: { scale: 1.5 },
    }
}

Solution 2

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

Delay before the animation starts

Use the transition prop:

export function AnimateOnLoad1Delayed(props): Override {
    return {
        animate: { scale: 1.5 },
        transition: { delay: 1 },
    }
}