Closed IDrumsey closed 1 year ago
The second line doesn't flash because the line doesn't move. The first line flashes because the hit area is moving under and away from the mouse in an infinite loop.
The hover event/styles should be applied to a hitbox that stays static the whole time.
Read more: https://www.joshwcomeau.com/animation/css-transitions/#doom-flicker-13
Update: Have changed from lines to boxes to fix hover issues.
Perhaps I should have been more clear, but that was not the issue I was referring to. The second line element flashes when reduced motion is turned on. I know what's causing it at a surface level. It's the custom css reduced motion line transition-duration: 0.001ms !important;
. If you comment that out in globals.scss
the flash goes away. But the issue with that solution is that I need that css to prevent NON framer motion elements (like the first horizontal line) from having motion in their animations. One solution might be to somehow apply the effects of the <MotionConfig reduced="user">
wrapper to all children, not just the framer motion children, but I don't think that is possible.
https://github.com/framer/motion/assets/58646634/1bfeb604-70dc-4e36-b921-8546de84d13a
Here's another sandbox that shows the issue if you remove the custom reduced motion css. WIth reduced motion turned on, you'll notice that the animation for the framer element doesn't have motion, but the non-framer element still does. So now the flash is fixed, but the motion on regular elements has become the new issue.
https://github.com/framer/motion/assets/58646634/0ed319ba-0759-47ed-86c3-d51eea32d7e9
Investigating a little further, adding the line transition-duration: 5s !important;
, the box runs the animation/transition twice (which is why we see a flash with 0.001ms
for the duration instead of 5s). It seems like it runs first with Framer's default transition duration and then runs again with our custom duration. As discussed in this video, the custom css where the custom duration comes from is an easy way to reduce the motion for all elements. I don't want to have to go in and reduce the motion for all the animations in the codebase if possible. @mattgperry can we reopen this as this is likely a bug with framer?
https://github.com/framer/motion/assets/58646634/f1a6cbfa-1916-4500-9ba3-a21a45211965
Describe the bug
Framer motion animations "flash" when using with custom reduced motion css.
See https://stackoverflow.com/questions/76314970/framer-motion-animations-flashing-when-used-in-conjunction-with-custom-css
IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/nervous-leaf-wblzxc
Steps to reproduce
Steps to reproduce the behavior: See stack
Expected behavior
The animations should NOT flash.
Environment details
Happens in Firefox and I think Safari (Haven't tested sandbox in Safari)