Animations work on dev but not on hosted app

[gohyun14]

I just created a test application using AutoAnimate, and while testing on my local environment all the animations work as desired, however after deploying the app none of the animations work at all. I am using React and NextJS and hosting on Vercel. Does anyone know why this would be and what I could try to fix it?

[ekwoka]

I'm not having this issue, but similar, maybe.

Animations just worked on dev last week, and now they don't work on dev or preview deployment

specifically, useAutoAnimate is not working.

Manually doing

const animate = useRef(null);
useEffect(()=> (animate.current && autoAnimate(animate.current)))

works

I would have assumed that was most of what useAutoAnimate did anyway?

looks like useAutoAnimate uses an empty dep array on the useEffect so if the element in question isn't there at the start (conditionally rendered), it'll not hook up (this was my issue)

[justin-schroeder]

We havent changed anything in that time frame.

Keep in mind animations are disabled when prefers-reduced-motion is on.

[verheyenkoen]

I may have had a similar issue in Chrome 106 yesterday. Animations just suddenly stopped working. Been looking into what was wrong and reverted everything back to a working version to find that animations were just not working anymore. Then I tried a different browser and it worked. Must have been chrome, incorrectly passing on prefers-reduced-motion at some point because after a restart it worked again.

[justin-schroeder]

I bet @verheyenkoen — probably something to do with prefers-reduced-motion.

Good catch 👍

[paleite]

Had this happen to me as well, but I found the issue: This happens when you're debugging animations in Chrome and have paused animations. You need to unpause animations again and then it works again. Closing dev tools also works.