Skip to content
Go to file


Failed to load latest commit information.

*** This project has been merged into react-spring:

*** Changes and bugfixes will go there instead.


A springy, composable parallax-scroller for React.

npm install react-springy-parallax --save


Simple example:

Example source:

More complex example: (the one in the thumbnail)


How to use

import Parallax from 'react-springy-parallax'

// Pages determines the total height of the inner content container
// Each page takes 100% height of the visible outer container by default
<Parallax ref='parallax' pages={3}>

    // Add as many layers as you like
        // Page offset, or where the layer will be at when scrolled to
        // 0 means start, 1 second page, 1.5 second and half, and so on ...
 Β  Β  Β  Β // Parallax factor, allows for positive and negative values
        // Shifts the layer up or down in accordance to its offset

        <span>Layers can contain anything</span>



Can the effect be configured or muted?

Yes, you can use anything the Animated library offers:

import Animated from 'animated/lib/targets/react-dom'
import Easing from 'animated/lib/Easing'

    effect={(animation, toValue) =>
        Animated.timing(animation, { toValue, duration: 200, easing: Easing.elastic(2) })}
    ... >

Or a zero timer for a tame, old-school parallax:

effect={(animation, toValue) =>
    Animated.timing(animation, { toValue, duration: 0 })}

Is it possible disable the scroll bar for custom page navigation?

Yes. In this mode it will also make sure window-resize retains the last page seen.

You can always use scrollTo, scroll bar or not, there is no restriction.

    ref={ref => this.parallax = ref}
    ... >
        <div onClick={() => this.parallax.scrollTo(1)}>
            Click to get to the next page

Does it scroll horizontally as well?

Sure does.

<Parallax horizontal ... >


🌊 A springy, composable parallax-scroller for React - deprecated




No releases published
You can’t perform that action at this time.