[BUG] Lag wehen using transitions in the mobile browser

[rezadev8]

When I use transitions, there is no issue in my desktop browser.

However, it lags in the mobile browser.

But, adding the transition to the project's CSS file resolves the problem

What should i do?

Laggy code

<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} </motion.div>

Solve the problem

<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0 }} className="my-div" </motion.div>

CSS .my-div{ transition: all 0.3s; }

Using nextjs 13

[agordondesign]

I am running into the same issue. Thank you for sharing your solution as a temporary fix.

[francestu96]

Any update on this? I have the same problem and I would like to avoid workarounds

[rezadev8]

Any update on this? I have the same problem and I would like to avoid workarounds

In my project, I reduced the size of the images and minimized the use of transitions with Framer, resolving the issue with CSS.

[Barbagidon]

MAN U ARE GOD

[Barbagidon]

generally this happens because of the power saving mode on iphone, if you turn it off the animations will work fine

[rezadev8]

generally this happens because of the power saving mode on iphone, if you turn it off the animations will work fine

I use an android phone, and I've seen this lag on several phones. Although this solution might work well on iphones.

[phamquocduy]

The workarround is not working for me while using in combination with the times parameter or animation with useAnimation() hook. Please fix!

[damyvegaleiva]

generally this happens because of the power saving mode on iphone, if you turn it off the animations will work fine

This is just crazy. But it's true. 🤯🤯🤯

[mattgperry]

Yeah there's a 30fps throttling on rAF when using power saving mode. The CSS "fix" is obviously discouraged as there's no real reason to use Motion. But what you can do instead to preserve springs etc is use transform: "translateY(10px)" to translateY(0px) which will run the animation via WAAPI.