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

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