aholachek
commented
5 years ago Hi, I turned on CPU throttling in Chrome devtools and I can definitely see the problem.
I think there are probably several issues happening at here.
First, I think some of the "jitter" is caused by the labels being removed after they fade out. I took screenshots of two frames right next to each other from the chrome performance timeline:
Second, would it be possible to hide the labels for the duration of the animation? When I look at the "layer borders" and "paint flashing" in Chrome devtools, the labels seem like they're causing extra work in the browser.
Finally, as much as it pains me to say it, if the above two changes still don't fix the situation for low-end devices, it might make sense to try another flip library that gives you more control over the animation. For instance, animate-css-grid is animating the scale of the boxes around the icons, as well as adding a counter-scale to the icon contents, but you could just try using FLIP to animate the positions (translateX and translateY) of the icons themselves instead, which might be less work for the browser.
bugejakurt
Great library! We have implemented this library to our website but are having some problems with animation jankiness on lower end smartphones. As you can see in https://www.conforama.es the header uses this library to animate a collapsing/expanding effect during scroll. Do you have some suggestions we could add in order to make animations smoother? We have already tried the "will-change: transform" rule however this resulted in more not less jankinness.