Improve parallax performance

[davwheat]

Feature Request

Parallax performance is very poor on low-end devices and phones. This article lays out some great parallax performance tips which could be implemented into this package.

Proposed Changes

https://medium.com/@dhg/parallax-done-right-82ced812e61c

[jscottsmith]

@davwheat Thanks, appreciate the article.

Most of what is mentioned in this article has already been considered and implemented in this package:

• Only use properties that are cheap for browsers to animate (uses transform: translate3d).
• Use window.requestAnimationFrame (yep)
• Only animates elements in viewport (yep, and caches bounding rects)
• Animate only absolutely positioned elements (up to the user to setup the appropriate styles)
• Uses natural scroll (yep, but again, up to the user -- only recently allowed users to use an arbitrary set scrolling element)
• Don’t animate massive images or dramatically resize them. (Agreed, up to the user)
• Avoid animating 100 things at once (Agreed, up to the user)

Anyway, feel free to look at the source and PR with improvements.

Also, I don't recommend using parallax on mobile devices (see the PSA at the bottom). I think it mostly annoys users. I suggest disabling them. Some more info about optimizations are here:

https://github.com/jscottsmith/react-scroll-parallax#optimizations-to-reduce-jank

[davwheat]

Sorry I only checked the source for one thing and saw that wasn't implemented but wouldn't make a big difference anyway.

I'll take a look at the jank reducing section but I have a feeling it could be to do with the fact I'm also transitioning blur and gray-scale at the same time.

[jscottsmith]

Oof ya, those are expensive effects. I'd avoid it.