react-plx: VERY choppy animation with image parallax -- am I doing something wrong?

So… I was trying to use plx for a fairly “traditional” parallax effect: a section with a background image that scrolls away slower than the rest of the page.

What I did was create a container with position: relative and two “layers” inside, with position: absolute and top/left/right/bottom set to zero, to fill the entire container. Plx components are then used to translate the content of the layers to create the parallax effect.

Unfortunately something doesn’t seem to be working properly, resulting in a very noticeable delay in the animation (on Chrome) / very bad, choppy animation (on Firefox).

Am I doing something wrong? Is there a “cleaner” way to implement such an effect using Plx?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (7 by maintainers)

Most upvoted comments

Hello @rshk, If you can create example on https://codesandbox.io/ it would be very helpful.

But from what you described, you are doing things that are don’t dos for web animations. Are you using transform or top/margin-top to move elements? Are images large and scaled down? These are all heavy operations for the browser and that’s why it creates lag.

https://github.com/Stanko/react-plx#what-is-this

Avoid background-size: cover
Don’t animate massive images or dramatically resize them
Only use properties that are cheap for browsers to animate - opacity and transform (translate, rotate, skew, scale)

Try this example, I tried to replicate what you described, and it seems to work fine. https://codesandbox.io/s/l9k60qzpnm

Hope that helps, cheers!

Stanko on Oct 23, 2018

TBH Unfortunately I think Plx is just not made for your usecase.

Hmm… I’m confused, I thought this was probably the most common use case for parallax effects? (actually the one where the name comes from 😃).

Anyways, I’m not going to spend any more time trying to make the effect work (it’s not worth the time at this point); thanks for your support anyways!

Btw, you might want to try polling scroll position on requestAnimationFrame rather than using it to de-bounce scroll events, seems to perform much better from the testing I did (although still too slow on firefx).

Thanks, Sam

rshk on Oct 24, 2018