find ways to optimize framer motion animation as they dont look smooth even when it's a simple scaling animation

[tangway]

noticed that the scaling animations were not smooth and looked for ways to optimize it. learnt how to use chrome devtools' Rendering tab to enable fps monitoring and confirmed that the animation always drops frames in the earlier part. i also took a look at pixijs as it was suggested to be more performant and better suited for games but i realize it would take some time for me to figure out how to rewrite the whole thing to pixijs and make it work with react. also took a look at the native Web Animations API and came to the same conclusion.

luckily when i was reading a framer motion tutorial there was a section that talked about optimizing animations with the transform property. transform along with opacity animations are offloaded to the GPU rather than the CPU and it is a well-known way to optimize animations in CSS. there is also the will-change rule: as the name suggests, this property tells the browser that this element is going to be changed in some way. Caution: As layer creation can cause other performance issues, this property should not be used as a premature optimization. Instead, you should only use it when you are seeing jank and think that promoting the element to a new layer may help.

a concise resource on this topic: https://web.dev/articles/animations-guide

[tangway]

prior to the above i took some time to take a look at other animation libraries like pixijs, auto-animate, react-awesome-reveal and the native Web Animation API. but realized that ultimately they would also require time to learn and convert what i have built with framer motion and it would be something i will do for future iterations much later on when i have most parts of the normal flow of the game done

[tangway]

found out that using a longer duration like 2.5 seconds can make the animation look very smooth and stable too. confirmed this by checking that less frames were lost when i increased the duration