🌊 A springy, composable parallax-scroller for React

Overview

*** This project has been merged into react-spring: https://github.com/drcmda/react-spring

*** Changes and bugfixes will go there instead.

--

A springy, composable parallax-scroller for React.

npm install react-springy-parallax --save

Demo: http://react-springy-parallax.surge.sh

Simple example: http://react-springy-parallax-simple.surge.sh

Example source: https://github.com/drcmda/react-springy-parallax/blob/master/example/index.js

More complex example: https://github.com/drcmda/awv3node-homepage (the one in the thumbnail)

intro

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
    <Parallax.Layer
        // 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 ...
        offset={0}
        // Parallax factor, allows for positive and negative values
        // Shifts the layer up or down in accordance to its offset
        speed={0.5}>

        <span>Layers can contain anything</span>

    </Parallax.Layer>

</Parallax>

Can the effect be configured or muted?

Yes, you can use anything the Animated library offers: http://browniefed.com/react-native-animation-book

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

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

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

Does it scroll horizontally as well?

Sure does.

<Parallax horizontal ... >
Issues
  • 'Using this.refs is deprecated. (react/no-string-refs)' source: 'eslint'

    'Using this.refs is deprecated. (react/no-string-refs)' source: 'eslint'

    Hi, love this, I'm just getting started out with react and I'm not sure how to use this with this.refs.parallax.scrollTo

    Do I need to add it into the constructor? image

    I have just used the example code with some light editing

    So, how do I use it?

    Do I need to do it with a stateless function?

    Thanks again

    opened by spences10 10
  • White page between layers

    White page between layers

    I implemented the code for http://react-springy-parallax-simple.surge.sh/ but get white pages between the layers. Any ideas why?

    opened by alanwunsche 10
  • Update to React 16

    Update to React 16

    opened by deadcoder0904 9
  • Does this work horizontally?

    Does this work horizontally?

    Can the parallaxes be set to be side by side and to be moved from left to right(& viceversa) on clicks(/ horizontal scroll)?

    opened by ChCosmin 7
  • Anyone wants to help maintaining, taking control?

    Anyone wants to help maintaining, taking control?

    I would love to extend this, check in on the issues, etc. But my job is keeping me too busy often. I would be glad to share the rights to this.

    opened by drcmda 7
  • Once any link from page is clicked - the scroll is engaded

    Once any link from page is clicked - the scroll is engaded

    Hi! I've found one specific issue. Once any added to parallax layer link is clicked - the scroll to next layer is engaged. Right now I'm implementing modal-dialog which is accessed through links. So app behaves in such way:

    • click on link
    • the layer shifts and background colour is shown (related to fist page) | the layer is shifted to next one(non first layer)
    • modal is shown, but the page is reloads! Seems that this behaviour related also to first slide

    How could it be fixed? Could the behaviour of internal links changed to ignore scroll action?

    opened by 01Kuzma 6
  • How the animation could be edited and controlled?

    How the animation could be edited and controlled?

    Hi! Could you please explain more about how to use animation with you library? In you sample:

    <img
         src={url('server')}
         style={{ width: '20%', transform: [{ scale: this.animation }] }}
       />
    

    is this.animation pre-difined value? How different animations could be used? such as bounce-in, rotation, spin? I've tried this:

    style={{
              transform: [{rotate: spin}] }}
    

    But spin is undefined.

    Thank you very much P.S. I've glanced at http://browniefed.com/react-native-animation-book/ but it looks like more advanced examples

    opened by 01Kuzma 6
  • Works great with touchpad, very jerky with mouse wheel

    Works great with touchpad, very jerky with mouse wheel

    The effect looks really great when using the touchpad or grabbing the scrollbar with my mouse, but when I scroll with a mouse wheel the parallax is very jerky.

    opened by cpsubrian 5
  • Module not found: Error: Can't resolve 'react-dom/lib/CSSPropertyOperations'

    Module not found: Error: Can't resolve 'react-dom/lib/CSSPropertyOperations'

    ERROR in ./node_modules/animated/lib/targets/react-dom.js Module not found: Error: Can't resolve 'react-dom/lib/CSSPropertyOperations'

    react-spring-parallax: 1.1.0 react: 16.0.0 react-dom: 16.0.0

    I appreciate your work on the package and any insight you can give me.

    Thanks!

    opened by drjuarez 5
  • Getting TypeError: Cannot read property 'clientHeight' of undefined

    Getting TypeError: Cannot read property 'clientHeight' of undefined

    Hello! I am getting TypeError: Cannot read property 'clientHeight' of undefined this error when I try to go to other route using zeit/next. any hint how to fix this? Thanks.

    opened by oiojin831 4
  • Access to this.parallax.refs in a separate menu component?

    Access to this.parallax.refs in a separate menu component?

    I have a separate menu component and want to add "onClick={() => this.parallax.scrollTo(1)}" on some of my menu items to scroll parallax content.

    Is there a way to do this?

    opened by J0NNYZER0 0
  • Suggestion - Make layer move left/right when scroll vertical

    Suggestion - Make layer move left/right when scroll vertical

    Suggest to add one option to make layer can move from left or right when scroll in vertical.

    opened by gks66 0
  • Adjust Width of Page.

    Adjust Width of Page.

    I have the following structure for my code:

    <Parallax>
      <div className="wrapper">
        <Parallax.Layer>...</Parallax.Layer>
        <Parallax.Layer>...</Parallax.Layer>
        <Parallax.Layer>...</Parallax.Layer>
      </div>
    </Parallax>
    

    The div with class wrapper has a width property, but inside Parallax it doesn't work. I have set width: 85vw, but it's not working. What should I do to get it to work?

    opened by BlueBlazin 1
  • React-native

    React-native

    Does this work with react-native

    opened by smooJitter 0
Owner
—
—
A React Component for parallax effect

react-parallax Install yarn add react-parallax Demo on codesandbox Contribute If you find any bug or have problems and/or ideas regarding this library

Richard Rutsche 672 Jan 22, 2022
Easiest way to add scroll parallax effect on the component

React Parallax Component Easiest way to add scroll parallax effect on the component. Installation npm install react-parallax-component Usage import Pa

Andrey 149 Dec 9, 2021
Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Vladimir Kharlampidi 1.1k Jan 13, 2022
painless transitions built for react-router, powered by react-motion

React Router Transition Painless transitions for React Router, powered by React Motion. Example site. Requirements To use the latest version of this p

Richard Maisano 2.5k Jan 19, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

Charles King 291 Dec 8, 2021
A React library to work with lottie animations inside React.js

React Lottie Tools This React library helps to work with lottie animations inside React.js Info This library is an abstraction of the official lottie

Will 10 Jan 9, 2022
react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - ?? Library showing animation of number changes in react.js

Yeongsu Han 86 Jan 17, 2022
React App with games using animations (react-spring)

Teddy games https://pylnata.github.io/teddy/ React App with cartoon animations and games for kids. Developed just for fun and to learn React-spring li

Nataliia Pylypenko 137 Dec 21, 2021
Animated sidebar using react , react icon

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Sumit Harijan 4 Jan 17, 2022
Project build: REACT CREATE APP / REDUX / REDUX-TOOLKIT / REACT-SPRING / SCSS

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template. designed by Om Arya Available Scripts In the project

Discord: Fpsska#1531 1 Jan 9, 2022
Animation engine designed for React

react-tweenful Looking for an amazing React library for animating stuff? Look no more, we've got you covered! Demo https://teodosii.github.io/react-tw

Rares Mardare 69 Dec 19, 2021
Easily animate your data in react

data-driven-motion Easily animate your data in react This is a small wrapper around react-motion with the intention of simplifying the api for my most

Kye Hohenberger 530 Dec 18, 2021
(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an <Anime> component and what

HyperFuse 1.4k Jan 17, 2022
Use the full power of React and GSAP together

react-gsap-enhancer Demos Why? How it works? Usage API A React component enhancer for applying GSAP animations on components without side effects. For

András Polgár 709 Dec 24, 2021
react-magic-move - MagicMove wrapper.

React Magic Move Magic Move for React.JS NOT A PRODUCTION MODULE This was just a fun experiment, with some love, it could definitely be a real thing,

Ryan Florence 448 Dec 29, 2021
A React.js wrapper component to animate the line stroke in SVGs

react-mt-svg-lines Bring your SVGs to life Live Demo A React.js wrapper component that lets you trigger an "animated lines" effect within your SVGs by

Peter Morawiec 351 Jan 9, 2022
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Poimandres 22.1k Jan 19, 2022
Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Framer 13.4k Jan 15, 2022
Scroll-based actions and animations for react

react-spark-scroll React port of spark-scroll. The future! This repo has been around for a little while now. However, recently I re-created the demo u

Gil Birman 345 Nov 30, 2021