Recreate "The Goonies" scroll animation with React
Tags: react, frontend, animation
Published: 2021-06-15 12:26:31

![thegoonies2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rclicl3k2slfb1tfvaz.gif)
 
You may have noticed these mind-blowing scroll-based parallax animations around the web. One example is [The Goonies](https://the-goonies.webflow.io/) website. Another is [Apple's product introduction](https://www.apple.com/iphone-12/). Let's try to reproduce this animation technique in React.

---

## React scroll animation libraries

Most of the existing libraries trigger a predefined transition when the element hits the viewport. But it's not the effect we are trying to reproduce. The animation on [The Goonies](https://the-goonies.webflow.io/) is directly linked to the scroll position. If you scroll back to the top, the animation will play in reverse. If you stop scrolling, the animation stops.

![scroll-libraries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwk5fqkpwbb5ilqcsyap.gif) 

---

## React PLX to the rescue

[React PLX](https://muffinman.io/react-plx/) is a library that produces the exact effect we are looking for. It links the animation directly to a current scroll position. So that when you scroll back and forth, the animation follows the scroll.

![reactplx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xalko3tus6bl0csx4xpy.gif) 

---

## Recreating "The Goonies" parallax with React PLX

First, let's grab some assets. We will need a foreground layer with leaves, a background layer with the ocean and mountains, and the layer with the title.

![assets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2nye9s1bf7idzk4h0ur.png) 

Now, let's put all three images in our app, position them on top of each other with `position: fixed`, and put the correct `z-index` so that our foreground layer is on top.

![layers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ct1a8r8amink2tu8rcb.png)

It's time for the animation! Let's wrap every image with `<Plx />` component and provide required transitions with `parallxData`

### Foreground

For the foreground, let's start the animation right away when `scrollTop` is `0`. Stop the animation when a user scrolls down to `700px`. During this time, let's scale our layer from `1` to `1.6` respectively to the current scroll position.

```jsx
<Plx parallaxData={[
	{
    start: 0,
    end: 700,
    properties: [
      {
        startValue: 1,
        endValue: 1.6,
        property: "scale"
      }
    ]
  }
]}>
  <img src="foreground.jpg" />
</Plx>
```

### Background

For background, let's keep the animation active a bit longer until the user scrolls down to `800px`. Let's also scale it, but much less than the foreground layer. It will help to achieve this beautiful parallax effect between foreground and background layers.

```jsx
<Plx parallaxData={[
    {
      start: 0,
      end: 800,
      properties: [
        {
          startValue: 1,
          endValue: 1.18,
          property: "scale"
        }
      ]
    }
  ]}>
  <img src="background.jpg" />
</Plx>
```

### Title

The title simply needs to fade away. Let's keep the animation going from `0` to `400px` and change the `opacity` from `1` to `0` to make it disappear.

```jsx
<Plx parallaxData={[
    {
      start: 0,
      end: 400,
      properties: [
        {
          startValue: 1,
          endValue: 0,
          property: "opacity"
        }
      ]
    }
  ]}>
  <img src="title.png" />
</Plx>
```

---

## The Result

Check out the [Demo](https://cevfr.csb.app/). And the [source code on CodeSandbox](https://codesandbox.io/s/clever-wildflower-cevfr?file=/src/App.jsx).

---

P.S. Shout-out to [Stanko Tadić](https://github.com/Stanko) for creating this great library.

Originally published at [alexsidorenko.com](https://alexsidorenko.com/)