Motion: [FEATURE] Performance Guide

[mulholio]

I've been creating some great animations with framer-motion but I've run into a couple of cases where the animations aren't as performant as I'd like.

I'd love to have some resources which advise on how to increase the performance and smoothness of animations: best practices, common pitfalls and so on. I'm not having great results with the React profiler.

I'm struggling to find advice on this lib through blog posts/Google so some advice from the author(s) would be greatly appreciated.

[mattgperry]

Have you got some code examples of some poor performing animations? I think this is a great idea in general, but I would say the performance advice is the same here as it is for most web animations ie try to stick to transforms/opacity etc

[mulholio]

Hmm, building some now but not sure how speedy it would be to extract them into a CodePen.

I'm getting some lag with some animations that only use x transforms atm so not really sure where to look next to improve things.

Thanks for the quick response.

[samtgarson]

I've also struggled to find advice on this, beyond what has been mentioned on this thread already.

I'm no React/browser expert and I'm experiencing significant lag on a new animation heavy, personal site that I've just started on... Not asking for specific help on this thread but just +1ing the idea!

I feel like there might be some obvious and easily-avoidable gotchas that would be worth documenting for less animation-experienced folks.