[Question] Performance Improve (rfx-parallax)

[rosostolato]

Hi! First of all, I want to thank you for this great lib, it's very useful and easy to use!

This issue is more a question than a feat request. I implemented it on my website and while I was analyzing the performance with dev tools, I saw some frame drops and lots of events calls on a single mouse scroll event. I saw on the home page that this project has already improved the performance with translate3D, but my question is if is there any plan to improve it even more (or if it's still possible to improve it). Though the performance is already satisfactory, the frame drops were visible on some poor devices.

UPDATE:

I was applying a blur filter to the image element and it was one of the reasons it was performing badly on poor devices. I still see frame drops on dev tools, but they are way better now. So it's a good tip to insert on readme, image filters can impact performance.

[RedFoxxo]

Hi, welcome and thank you for your feedback! Yes, there are a huge amount of event calls on a single mouse scroll because i recalculate image position every pixel (more or less). It's very expensive in terms of resources and I'm trying to find a better solution. I've already nuked translate3d, it was very glitchy, instead I'm using translate + will-change properties which work very well with chrome (translate3d doesn't).

I'll take a look at how a blur filter behaves with this package and update readme accordingly.

[RedFoxxo]

I found that in this package I still use translate3d instead of translate + will-change, but this doesn't affect performance. I think the performance can be further improved by using window.requestAnimationFrame() instead of attaching directly to the scroll event. I will investigate more in the coming weeks

[RedFoxxo]

[CHANGELOG]

• code refactoring
• dynamic will-change based on scroll
• round scroll position to first decimal
• skip same transform value
• support for format like ".avif" for better loading times

I will do some testing before closing the issue, feedback is always welcome.