# Plx - React parallax component

DevFeed: [Plx - React parallax component](<https://devfeed.tech/articles/plx-react-parallax-component-37330.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/plx-react-parallax-component/>)

Author: Stanko

Published: 2017-07-24T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [React Component](<https://devfeed.tech/topics/react-component.md>), [Optimization](<https://devfeed.tech/topics/optimization.md>), [Code](<https://devfeed.tech/topics/code.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [optimization](<https://devfeed.tech/tags/optimization.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>)

## AI overview

This article introduces Plx, an open-source React component for creating parallax effects driven by scroll position. It explains the component's scroll manager, viewport-based animation behavior, and performance optimizations.

## Source excerpt

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 termthe 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. 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