CODEWITHSUNDEEP
reactjsanimationframer-motion
Tore
Tore

Reputation: 119

How do I delay animate, not whileOver or WhileTap in framer motion?

Im want to delay animation of each button im mapping out when the component mounts, but not when hovering or clicking the buttons. Now I get the delay allways.

Any ideas?

<motion.button
                className={distanse === place ? "aktiv" : null}
                initial={{
                  opacity: 0,
                  y: -200,
                  rotate: 180,
                }}
                animate={{ opacity: 1, y: 0, rotate: 0 }}
                transition={{
                  type: "spring",
                  stiffness: 150,
                  delay: Math.random(),
                  duration: 2,
                }}
                whileHover={{ scale: 1.3 }}
                whileTap={{ scale: 0.9, rotate: 45 }}
                key={i}
                type="button"
                value={place}
                onClick={handleDistanceChange}
              >
                {place === "10km" ? "Mål" : place}
              </motion.button>

Upvotes: 1

Views: 4148

Answers (1)

William Park
William Park

Reputation: 1767

I believe you can add a transition key to the animate object itself:

animate={{
    opacity: 1,
    y: 0, 
    rotate: 0,
    transition: {
        type: "spring",
        stiffness: 150,
        delay: Math.random(),
        duration: 2,
    }
}}

Alternatively if this doesn't work, I can see in the documentation here: https://www.framer.com/docs/gestures/

<motion.button
  whileHover={{
    scale: 1.2,
    transition: { duration: 1 },
  }}
  whileTap={{ scale: 0.9 }}
/>

that you can use this pattern with the gesture objects, so you could perhaps nullify the transition in there.

Upvotes: 4

Related Questions