Framer X » Animation » Example animations » 7. Event: Tap

7. Event: Tap

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

Open Framer Motion version in CodeSandbox

Code component

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

    return (
        <Frame
            // Visual & layout
            size={150}
            borderRadius={30}
            backgroundColor="#fff"
            center
            // Animation
            animate={animate}
            onTap={() => cycle()}
        />
    )
}

Framer Motion

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

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

Override

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

    return {
        animate: animate,
        onTap() {
            cycle()
        },
    }
}

2 comments on “7. Event: Tap”

  • marco.morici says:

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

    • Tes Mat says:

      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