Skip to content

v2.0.0
Compare
Choose a tag to compare
@jscottsmith jscottsmith released this 07 Mar 07:49
· 451 commits to master since this release
v2.0.0
d02a6cf

Breaking changes

  • Replaces all the offset props and removes the slowerScrollRate prop in favor of x/y props that take arrays for start/end values
  • Updated the way progress is calculated
  • Support for the latest React version

New Features

  • Added support for horizontal scrolling
  • Support parallax scrolling effects in a div with scroll overflow

Breaking changes

Replaces all the offset props and removes the slowerScrollRate prop in favor of x/y props that take arrays for start/end values

This:

<Parallax offsetYMin={-100}  offsetYMax={100} slowerScrollRate={false}>

becomes this (values flipped):

<Parallax y={[100, -100]}>

And this:

<Parallax offsetYMin={-100}  offsetYMax={100} slowerScrollRate={true}>

becomes this (starts at -100%, ends at 100%):

<Parallax y={[-100, 100]}>

Why?

The way the min/max offsets worked was confusing and limiting:

Updated the way progress is calculated

Progress is now calculated from the original elements position in the viewport. So the top of the element at the bottom of the window is 0, the bottom of the element at the top of the window is 1. If you are upgrading from v1 some elements may appear to move further/faster than they did before so you might need to adjust the x/y offsets.

These changes address this issue:

#24

Which now allows for this:

http://react-scroll-parallax-next.surge.sh/?selectedKind=%3CParallax%3E%20Vertical&selectedStory=linear%20y%20offsets&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

Support for the latest React version

Removes usage of some deprecated lifestyle hooks and uses the latest context api. Requires react@16.3.0 or greater.

New Features

Added support for horizontal scrolling

Horizontal scrolling is now working. Just tell the provider the axis:

<ParallaxProvider scrollAxis="horizontal" />

Example:

http://react-scroll-parallax-next.surge.sh/?selectedKind=%3CParallax%3E%20Horizontal&selectedStory=linear%20x%20offsets&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

Support parallax scrolling effects in a div with scroll overflow

Give the provider a reference to the DOM element which will be scrollable and contain parallax elements.

const domElement = document.getElementById('my-scrolling-div');

<ParallaxProvider scrollContainer={domElement} />;

Example:

http://react-scroll-parallax-next.surge.sh/?selectedKind=%3CParallax%3E%20in%20a%20%3Cdiv%3E&selectedStory=vertical%20with%20y%20offsets&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

Assets 2
Loading