Repository navigation
[BUG] whileInView transition values override the other transition values #2636
Description
Activity
Having the same issue but managed to fix it by moving the
whileHoverto a parent div of thewhileInViewcomponent:import { motion} from "framer-motion"; export const App= () => { return ( <motion.div whileHover={{ opacity: [0, 1], transition: { duration: 0.3, delay: 0 }, }}> <motion.div style={{ background: "black", marginTop: 10 }} initial={{ opacity: 0 }} whileInView={{ opacity: 1, transition: { duration: 0.4, delay: 3 } }} > text </motion.div> </motion.div> ); };Reacted by Wisdom ZaneReacted by Wisdom ZaneClosing as intended behaviour. When a gesture ends, Motion animates back to the next active state using that state's transition. In your code the next state is
whileInView, whose transition hasdelay: 3, so after a quick hover the opacity waits 3 seconds before returning to 1. I confirmed this on framer-motion 11.0.25 and on current main (React 18 and 19): the hover animation itself starts with no delay, and the return towhileInViewholds for 3s. To avoid it, keep the delay off thewhileInViewtransition, or movewhileHoverto a parent element as @n-ii-ma suggested.
Generated by Claude Code
im trying to animate
whileHoveron adivopacity :[0,1]what i want:
if i hover on the
divthe opacity goes from 0 to 1 it works if ihoverdand stayed on the div but..what happens:
if i ran the mouse on the
divfast thedelay:3works but i dont want thewhileInViewdelay value to work if i hoverd on the divhttps://codesandbox.io/p/devbox/crazy-euler-4flt8c