Animating scale creates choppy animation, most notably on safari, but apparent in all browsers. about react-plx HOT 7 CLOSED

Thanks for the suggestions!
I applied it and released 1.3.17.

Can you please give it a go?

from react-plx.

So much smoother! Thanks so much! 🔥

from react-plx.

Nice! Thanks for help!

from react-plx.

Hello @AlexandraKlein,

This is how library works - on scroll, it calculates interpolated value of the property it needs to animate.

In your example, image is scaled a lot (300%) for a duration of window height. Meaning that when you scroll for something like 50px, it is 1/20 of the window height (if we assume window height is 1000px) which means the image is going to be scaled for (end-start) * 1 / 20 which in this specific case comes to (300% - 100%) * 1 / 20 = 10%. So the image gets scaled for 10% which is obvious and choppy. On top of that resizing images on scroll is expensive as well.

That's why trackpad scrolling works much better than the mouse scroll.

For this specific case, try using position: fixed, as it works pretty smoothly for me (Safari 14.0.3):

I had an idea of adding a super short transition, but that isn't trivial to implement, and I never invested time.

Hope that helps, cheers!

from react-plx.

Thanks for taking a look, @Stanko!

However, I used a large scale value to demonstrate the choppiness, but it's choppy even going from scale(1) to scale(1.1). Again, this is most noticeable on Safari. Seems that this should not require a position: fixed to solve.

from react-plx.

Honestly, not sure why it happens, it probably has something with browser recalculating the image's position on scroll as well as scaling it.

from react-plx.

It's this line: https://github.com/Stanko/react-plx/blob/master/source/Plx.js#L387

For pixel values, it works fine, but for scale is choppy because it's only going to 2 decimals. Would you consider changing this to return value.toFixed(4);(or return Math.floor(value * 10000) / 10000;)?

Also, may I suggest adding newStyle.willChange = 'transform'; inside this condition? https://github.com/Stanko/react-plx/blob/master/source/Plx.js#L452 (ref: https://dev.opera.com/articles/css-will-change-property/)

from react-plx.