9. Cycling through states

Here, an onTap() event and Framer’s useCycle() hook are used to cycle between two visual states.

Code component

export default function CC_09_Cycling_through_states(props) {
    const [animate, cycle] = useCycle(
        { scale: 1, rotate: 0 },
        { scale: 1.25, rotate: 90 }
    )

    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "pointer",
                }}
                animate={animate}
                onTap={cycle}
            />
        </div>
    )
}

Code override

export function Cycling_through_states(Component): ComponentType {
    return (props) => {
        const [animate, cycle] = useCycle(
            { scale: 1, rotate: 0 },
            { scale: 1.25, rotate: 90 }
        )

        return <Component {...props} animate={animate} onTap={cycle} />
    }
}

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: