[BUG] whileInView transition values override the other transition values
OSAMA263 opened this issue · comments
im trying to animate whileHover on a div opacity :[0,1]
what i want:
if i hover on the div the opacity goes from 0 to 1 it works if i hoverd and stayed on the div but..
what happens:
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
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>
</>
);
};