Framer X Pro Tips

Code

Code Override

Framer X

Play an animation on load, not just onTap

2018-12-12

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

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!

PPS: See other pro tips, or share / request a new tip.

download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!