I am building an animated grid with react-spring. Elements are animated from previous to next position. Positions are calculated to fit elements depending on width and their margins.
The problem
There is a glitch when the animation enters that halts the animation for a fraction of a second when the page first loads. This can be seen clearly on the browser page (latest Chrome and Firefox). The glitch is bearly visible in the codesandbox, but also happens there.
The gif example animation provided makes the glitch more obvious. The behavior on browser can be reproduced by downloading the code sandbox and npm start.
Thoughts
I believe this has to do with the browser loading and some frames being dropped during that.
Questions
- How to avoid frames being dropped due to browser load if that is the case?
- Above all: how to avoid the glitch, and what possible workarounds can you see? (e.g: Loading animated elements after page completely loads)
Additional question: I also observe that the end part of the animation is kinda funky with a very low step, is this expected behavior? What would the ideal config look like to avoid that...?
