Plx - React parallax component

I'm becoming predictable. Again, I haven't found component I like, so I wrote my own.

This time, I've build React component for parallax (on scroll) effects. Check the live demo. It is called Plx, it is open source and available on GitHub and npm.

What it does

So far in my career, I've built so many parallax components. Parallax is actually wrong term (the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g. through the viewfinder and the lens of a camera.) here, but it got accepted by development community.

Designers love them and users are fascinated by fancy effects. Simply explained as you scroll the page down something is changed relative to the scroll position. For example, as you scroll you can make things explode! Just check the demo.

Make things explode! Plx demo

There is a lot of solutions out there, but IMHO they are usually bloated or not performant or complicated to use. And as I'm using React a lot, I decided to collect what I have learned about implementing on scroll effects in React and create standalone component. Most of the code in this component is pulled out from my existing projects and glued together.

Performance

Plx is really performant, thanks to a few optimizations.

First and the most important one - it is not listening to window scroll event. It is using simple scroll manager, which checks if scroll has changed every 16ms (to get smooth 60fps). When scroll changes it broadcasts custom event. All of the Plx components are listening to this event and share the same scroll manager (it is singleton). Singleton is created with the first component, and destroyed when last one unmounts.

Another optimization is that elements are not animated when not in viewport. Actually, they are not animated if they are more than 50px outside of viewport. So component "gets ready" 50px before it enters the viewport. You can force animating element even outside of viewport by setting animateWhenNotInViewport prop to true.

Beside that, every update is done in requestAnimationFrame.

Still you need to avoid common "don't dos" when making a parallax page:

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

Read this great article to find out more (that is where I got my initial inspiration).

Supported effects / properties

Plx supports every CSS property that has numeric value ( opacity, height, padding (The most performant properties to animate are opactity and transform. So stick to those two to keep your parallax effects performant. Of course you can animate something else here and there, but be careful and test it throughly.) ...). I wrote a formula (this sounds way more sciency than it is) which calculates property value depending on the scroll position and given input values.

It also supports transform, and you can pass multiple transform functions (translateX, rotate, skewZ...). You can even animate colors on scroll (background, text and border colors are supported)! Colors are broken down to their R/G/B/A values, and then same formula is applied to each one of them.

At the end

What are you waiting?! Get it from npm and start using it :)

$ npm install --save react-plx

Documentation is available on GitHub.

import React, { Component } from 'react';
import Plx from 'react-plx';

class Example extends Component {
  render() {
    return (
      <Plx
        className='MyAwesomeParallax'
        parallaxData={ ... } // your parallax effects, see documentation
      >
        /* Your content */
      </Plx>
    );
  }
}

Feel free to contribute, cheers!

Comments (8)

Valerii
01. Jun 2018, 06:25

Hi from Ukraine!

I have used your awesome component!

You can check it follow the link, not brilliant work but it`s my first parallax page.

ico.experitus.com

Thanks for component:)

Andreas Asprou
24. Sep 2018, 21:14

Hey,

Just wanted to say thanks. This is bloody amazing. I've been looking for a while for something like this (as opposed to ScrollMagic, React Track.. etc).

Thanks again,

Andreas

Stanko
26. Sep 2018, 07:16

Hey Andreas,

thank you for the kind words. I'm glad you are using Plx. If you have build something with it, I would love to see it. Feel free to submit a link in GitHub issues.

Ryan Calleja
04. Mar 2019, 16:07

Hey there,

Super amazing component ! I love that it is highly customisable and used it well in our desktop version of our platform.

Wanted to ask if it is intended to work smoothly on mobile devices ? I gave it a test on iOs and Android but found it quite laggy. Am I missing something ?

Thanks a lot for your contribution towards front end development.

Stanko
04. Mar 2019, 16:40

Hey Ryan,

Thank you for the praise, I'm doing my best :)

I've tried Plx demo on both iOS and Android phones, and it works smoothly.

There are couple of things that might affect performance - large images or videos, background size cover, animating CSS "expensive" properties... It is probably the best to open an GitHub issue with an example on sandbox of yours.

Cheers!

pahosler
09. Jul 2019, 04:38

Thank you for this awesome component. Yours was the third I tried, so glad it worked, I was getting frustrated and on a deadline. The usage was about as basic as you can get, but I'll definitely use it Plx in future projects when parallax is needed.

Stanko
09. Jul 2019, 07:59

Hey pahosler,

I'm really glad to hear that. Initially I wrote a simpler parallax implementation for a project. Then it looked promising, so I extracted, polished and published it as a library. It is awesome to see other people are using it. If you can share what you built using Plx, I would love to see it!

Cheers!

Niklas
04. Nov 2019, 20:10

This is the best f***ing feature I ever used, thank you so much for the scaling

Please continue