const Six = () => { | |
const container: Variants = { | |
active: { | |
background: "#ff00b1", | |
}, | |
disabled: { | |
background: "#0D00FF" | |
} | |
}; | |
const box: Variants = { | |
active: { | |
rotate: 90, | |
opacity: 1 | |
}, | |
disabled: { | |
rotate: 0, | |
opacity: 0.7 | |
} | |
}; | |
const [active, setActive] = React.useState(false); | |
return ( | |
<motion.div | |
variants={container} | |
animate={active ? "active" : "disabled"} | |
onClick={() => setActive(!active)} | |
className="container" | |
> | |
{[0, 1, 2].map(value => ( | |
<motion.div key={value} className="box" variants={box} /> | |
))} | |
</motion.div> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment