Creating an easy parallax effect using react-spring animation library

With hundreds of choices out there, choosing is becoming more difficult than ever. At least that’s how I feel when trying to find a good react.js animation library.

Roll in react-spring parallax.

The react spring animation library is brilliant. It takes all the complication out of creating animations with react.js and dulls it down to only what you need.

For example, one of my favourite animations / effects is a parallax, when done correctly it can look a million pounds.

Making use of the react spring parallax animation library looks a little like this:

import { Parallax, ParallaxLayer } from 'react-spring/addons';
...
<Parallax scrolling ref={ref => this.parallax = ref}>
    <ParallaxLayer offset={1} speed={2}>
      <img … />
    </ParallaxLayer>
</Parallax>

For those of you that have tried creating a reusable parallaxing component within react will probably understand, it’s pretty tough to do, and this just goes to show how simple and easy that little bit of code, provided by the react-spring JavaScript library, is for a parallax animation.

For those who have not, you can see what goes into simple animations by trying out checking out my other blog post on creating your own custom animation here.

Here is a parallax animation that I created from scratch using only, react.js, javascript and css (Yes, I learnt the hard way): https://www.telegraph.co.uk/travel/discover-america/evolution-of-music/

The amount of code that went into that parallax was extraordinary, and because of that (and tight deadlines) it became fairly un-maintainable.

So when react spring provides you with a beautiful parallax api to consume, I highly suggest using it.

I haven’t found any bugs with react-spring’s parallax API either, a couple of inconveniences perhaps, but no bugs.

An example of this is when creating a link using an ID can be problematic with react spring (atomizedobjects.com/test#test).

If you want to link out to a specific part of the page using an id in the url, it will most likely break your page if you are creating a full page parallax using react spring’s animation library.

You can work around this by using react spring’s function this.parallax.scrollTo() which you can pass a page into and it will scroll you to that page of the parallax.

So it’s not really a major issue, just a little inconvenient.

Here is how you set up a simple parallax using the react-spring animation library:

Step 1.

In your terminal type in npx create-react-app react-spring-test && cd react-spring-test.

Step 2.

In your terminal type in yarn add react-spring or npm install --save react-spring.

Step 3.

In App.js replace everything with the following:

import React from 'react';
import { Parallax, ParallaxLayer } from 'react-spring/addons';

export default function App() {
  let parallax;
  return (
    <Parallax pages={2} ref={ref => parallax = ref}>
      <ParallaxLayer offset={0.3} speed={0}>
        <span>Scroll down!</span>
      </ParallaxLayer>
      <ParallaxLayer offset={1.2} speed={0}>
        <span>Scroll down!</span>
      </ParallaxLayer>
      <ParallaxLayer offset={0.9} speed={3}>
        <span>I'm fast!</span>
      </ParallaxLayer>
      <ParallaxLayer speed={-0.2} offset={1.3}>
        <span>I'm going in the other direction!</span>
      </ParallaxLayer>
    </Parallax>
  );
}

Step 4.

In your terminal type in yarn start.

There you have your simple react spring parallax animation.

If you want to checkout another example of this type of react-spring parallax animation, you should have a look at my portfolio page.

I used the react-spring parallax api to help build it and might be one of the coolest parallax’s that I have built.

The code used in it is a little more in-depth than the code in this tutorial, however the basis is the same, meaning you would be able to create something similar using what you learnt here, here is the link: https://willmayger.co.uk/portfolio.

If you use this package and make something cool & creative with it, be sure to send me the link in by tweeting me on twitter with the link to your parallax or other react spring animation.

Will