anime icon indicating copy to clipboard operation
anime copied to clipboard

Performance improvement by removing unused properties

Open saminton opened this issue 4 years ago • 0 comments

Is your feature request related to a problem? Please describe. I came across a performance bottleneck recently where I am using anime.js to animate block of text word by word along with a smooth scroll that uses a translate on each section of the page. When using a hardware accelerated property such as translateZ on the text, the performance of the page suffers terribly. As far as I can tell it seems to due to having a lots of transforms within another transform that is causing the problem. So this may occur in other uses cases also.

The main problem here being that when anime.js finishes an animation the style remains even though it is no longer needed. So there are useless translateZ(0) on multiple node elements on the page. This seems to result in the page making unnecessary calculations hence the bad performance even after the animation has finished.

Describe the solution you'd like Detect when a property is not in use and remove it from the styling. Or better yet detect when the style is the same as what has been defined in the CSS styling.

I've managed to apply a temporary hack that works in my case, but not a reliable in the long term as it can create other problems : In the setProgressValue function only apply the transform if the value is not 0.

saminton avatar Oct 21 '20 10:10 saminton