Enhancement: Improve Animation Smoothness and Reduce CPU Usage

[erikyo]

Changes Made:

In this pull request, I have made improvements to the _slideCompare method to enhance animation smoothness and reduce CPU usage. Previously, I noticed that the animation could be a bit choppy, and I wanted to address this issue to provide a smoother user experience.

Enhancements:

Request Animation Frame: I replaced the previous animation logic in the _slideCompare function with the use of requestAnimationFrame. This change ensures that the animation is synchronized with the browser's rendering, running at approximately 60 frames per second, resulting in smoother transitions.

CPU Optimization: By utilizing requestAnimationFrame, we not only improve animation smoothness but also reduce CPU usage. The browser can optimize when to render frames, reducing unnecessary work and conserving system resources.

Testing:

I have tested these enhancements in different scenarios and found that the animation is significantly smoother, and the CPU usage is noticeably lower. These improvements contribute to a better user experience when using the ImageCompare component.

[kylewetton]

Tested it and works fine, thanks for that

[erikyo]

Thanks for confirming that the pull request works fine, Kyle! Your npm module was incredibly helpful to me in creating this Gutenberg block for a personal project - and made the process much smoother.

Thanks again for maintaining such a beautiful module! 😊