Animation » Example Animations » 9. Cycling through states

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 Framer book mailing list    ( ± 6 emails/year )

GDPR

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.

2 comments on “9. Cycling through states”

  • marco.morici says:
    January 21, 2020 at 14:12

    How can I change the text inside a frame using cycle? Like “show” “close”?

    • Tes Mat says:
      January 22, 2020 at 13:26

      Like this:

      import * as React from "react"
import { Frame, useCycle } from "framer"

export function CycleText() {
    const [text, cycleText] = useCycle("show", "close")

    return (
        <Frame
            size={150}
            borderRadius={30}
            backgroundColor="#fff"
            center
            onTap={() => cycleText()}
        >
            {text}
        </Frame>
    )
}

      Or with an Override on a Design Component:

      import { Override, useCycle } from "framer"

export function CycleText(): Override {
    const [text, cycleText] = useCycle("show", "close")

    return {
        text: text,
        onTap() {
            cycleText()
        },
    }
}

      Keep in mind that the name of the text block (which you made a property) should in this case be text.

Leave a Reply