Occasionally Odd Rendering Issue
trevorwhealy opened this issue · comments
First things first, what a cool library! I have been trying to achieve something so clean and readable that is built on top of existing animation libraries for years. I add this to fun projects and noticed that it sometimes has a rendering bug.
Example A:
Example B:
Example C:
I reduced my usage to the most basic form I could:
<div style={{
fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...`,
}}> <MechanicalCounter text={animatedValue} /> </div>
It appears that this is primarily caused by the nested span element.
You'll notice that the scale value, at rest, is not equal to 1 - though I didn't see any obvious reference to scale in your codebase, I think the culprit must be that the animation is stopping too soon for some reason which leaves the final animation state with some transition values instead of the final values.
Hey Trevor! Thanks for the kind words.
I see what you mean, maybe I am not being so efficient with my script and there's too much for framer to do because of some kind of layout trashing.. then it explains why the animation gets cut off abruptly.
Were you able to reproduce this across different versions, even different major version of framer motion?
The scale could be because I am using layoutId and so it animates between visual states in whichever way it can.. i.e. scale.
I am off for a few days so I will not be able to investigate for a while so if you can hold on for a week or so I can investigate!
Your intuition was correct - bumping up the framer-motion library to the latest version seems to have solved the issue. Guess that makes sense since the underlying issue seemed to be within their layout engine.
Screen.Recording.2023-05-02.at.4.18.15.PM.mov
Pretty slick. Hope to use this in the future. Thanks!
Good to hear! I'll go ahead and close up this issue then :)