Optimising for performance

[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.

[aholachek]

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]

Hi @aholachek, thanks for your prompt response. Labels are in fact "hidden" after they fade out with an added class which sets the font-size to 0. We are not setting display: none to the label.

We have also noticed that this "jitter" is also being caused with height transitions to the container. As per the attached the library seems to apply transformations in two steps with the transition thus the icons seem to slightly jump into place. Once the height transition is turned off this doesn't happen.

Thanks.