[BUG] Animation lagging with simple translation / opacity

[Aarbel]

Hi, i have a performance issue with AnimatePresence (see code / video bellow). The animation lags to open a simple Drawer on the side.

Do you know how i can solve this problem ? Can it be a javascript animation problem ? Do you really use pure CSS GPU accelerated animations ?

Vite_App.mp4

[mattgperry]

Have you tried setting will-change: opacity to the element animating opacity?

[Aarbel]

@mattgperry i will check. This is not automatically added by framer-motion ?

[mattgperry]

We add `translateZ(0)` to transforms but other styles have to be handled by users currently. `will-change` isn't side-effect free, maybe this is changing with better browser support but there are trade-offs involved that I'd have to look into before making it automatic.

…

On Thu, Jul 29, 2021 at 9:57 PM Clement Fradet Normand < ***@***.***> wrote: @mattgperry <https://github.com/mattgperry> i will check. This is not automatically added by framer-motion ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1229 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB34WKQUSL3QOQRYCS6HICTT2GXBVANCNFSM5BE25MBA> .

[Aarbel]

@mattgperry thanks a lot !

Did you putted the info in the framer animation doc ? I think it could be a good point in https://www.framer.com/docs/introduction/

A "performance" section would be really welcome in the docs too (we have some insights reading all the doc, but there's no clear section to have infos about performance).

[Aarbel]

@mattgperry fixed ?