Open OSAMA263 opened 3 weeks ago
im trying to animate whileHover on a div opacity :[0,1]
whileHover
div
opacity :[0,1]
if i hover on the div the opacity goes from 0 to 1 it works if i hoverd and stayed on the div but..
hoverd
if i ran the mouse on the div fast the delay:3 works but i dont want the whileInView delay value to work if i hoverd on the div
delay:3
whileInView
import { motion} from "framer-motion"; export const App= () => { return ( <> <motion.div style={{ background: "black", marginTop: 10 }} initial={{ opacity: 0 }} whileInView={{ opacity: 1, transition: { duration: 0.4, delay: 3 } }} whileHover={{ opacity: [0, 1], transition: { duration: 0.3, delay: 0 }, }} > text </motion.div> </> ); };
https://codesandbox.io/p/devbox/crazy-euler-4flt8c
im trying to animate
whileHover
on adiv
opacity :[0,1]
what i want:
if i hover on the
div
the opacity goes from 0 to 1 it works if ihoverd
and stayed on the div but..what happens:
if i ran the mouse on the
div
fast thedelay:3
works but i dont want thewhileInView
delay value to work if i hoverd on the divhttps://codesandbox.io/p/devbox/crazy-euler-4flt8c