Introducing the react-next-parallax NPM package
Tags: react, typescript, npm, frontend
Published: 2023-09-05 05:09:52

{% youtube Q2vpbwj4CVo %}

Table of Contents
- 1. [Introduction](#1)
- 2. [The problem solved by react-next-parallax](#2)
  - 1. [Scale Problem](#2-1)
  - 2. [Containing elements within a 3D frame](#2-2)
- 3. [What makes us think a scene is in the 3D space](#3)
  - 1. [Scale](#3-1)
  - 2. [Movement during rotation](#3-2)
- 4. [Attributes](#4)
  - [Scale](#4-1)
  - [Opacity](#4-2)
  - [Scale, Rotation, and Skew](#4-3)
- 5. [Animation Modes](#5)
- 6. [Animation Reverse](#6)
- 7. [Multipliers](#6)
- 8. [Animating elements that are being manipulated by the component](#7)
- 9. [Multi-component setup](#8)
- 10. [Improvements to react-next-tilt](#9)

## <a name="1"></a>1. Introduction

After spending countless hours developing this component over the past month, experimenting with different approaches, testing and making sure that the component is implemented correctly, writing the documentation, and developing multiple demos to showcase how it works, I'm excited to announce the [react-next-parallax](https://www.npmjs.com/package/react-next-parallax) component and the corresponding NPM package.

[react-next-parallax](https://www.npmjs.com/package/react-next-parallax) uses [react-next-tilt](https://www.npmjs.com/package/react-next-tilt) ([introductory blog article](https://dev.to/rashidshamloo/react-next-tilt-and-react-flip-tilt-npm-packages-24p0)) as the foundation and adds support for having a dynamic parallax scene in a confined frame. It also supports different animations like movement, opacity, scale, rotation, and skew based on the tilt angle. It is highly customizable, offering settings for different animation modes and speeds on top of all the other customizations offered by [react-next-tilt](https://www.npmjs.com/package/react-next-tilt).

To learn more about the component, how to install and use it, and all the different props and settings, you can check the package readme on NPM.js:

[react-next-parallax package on NPM.js](https://www.npmjs.com/package/react-next-parallax)

As the old saying goes: "A live demo is better than a thousand words". To see the component in action, you can check any of the following demos:

[Main Demo](https://rashidshamloo.github.io/react-next-parallax_demo)
[Attributes Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes)
[Control Element Demo](https://rashidshamloo.github.io/react-next-parallax_demo/control-element)
[Storybook](https://rashidshamloo.github.io/react-next-parallax/?path=/docs/fliptilt-react-next-parallax--docs)

In the rest of this article, I will go over the development process in more detail.

## <a name="2"></a>2. The problem solved by react-next-parallax

You can set up a parallax tilt effect using only [react-next-tilt](https://www.npmjs.com/package/react-next-tilt) (as you can see on its [demo page](https://rashidshamloo.github.io/react-next-tilt_demo/)) by translating/moving the elements along the z-axis. but you will run into two main problems when setting up parallax scenes this way.

Let's say we have a scene with many layers, like this:

![Multi Layered Scene](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9iyw0pcj1xli9pouw237.jpg)

By translating/moving the elements along the z-axis (giving layers in the front higher [`translateZ()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ) values) we can achieve a parallax effect:

![Scene overflowing the frame](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikd29ptau32u5423vhk1.jpg)

but we have already run into the first problem and that is:

### <a name="2-1"></a>1. Scale Problem

When elements are translated along the z-axis and are closer to the viewer, they appear to be bigger. it may be fine in other situations, but when we have a scene like this, we don't want the scale of the elements to change because then we would have to adjust the size of each element by scaling it down to achieve the original composition.

### <a name="2-2"></a>2. Containing elements within a 3D frame

The biggest problem we run into is the fact that we can't hide the parts of the images that are outside the tilt. You may think we can use [`overflow: hidden`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) but as I've mentioned in another [post](https://dev.to/rashidshamloo/making-a-3d-parallax-effect-with-css-2kpp), using it will flatten the image and remove the parallax effect.

> Technical note: You may be thinking that this is possible by putting the `preserve-3d` elements inside a container and applying `overflow: hidden` to it, but it's not:
> - Putting the tilt inside a parent/container with `overflow: hidden`:

> While the parent does hide the content outside of it, and the 3D effect is preserved, the content is not confined to the tilt element but to the parent. meaning it overflows the tilt element but then is cut off by the parent's bounds which doesn't look good.
> - Using an intermediary element with `overflow: hidden` inside the tilt containing the 3D content inside

> This could look like it works if you were dealing with a static scene. because the elements look like they're in 3D space and they are, just not in the 3D space we want!

> When we put an `overflow: hidden` element inside a `preserve-3d` element, it breaks the 3D stack at that point. and when we have another `preserve-3d` element inside of it, a new 3D stack is created. so what happens is that the elements inside of it are transformed in the 3D space but then get flattened. and the flattened result is put inside the parent's 3D space. so they don't move depending on the tilt angle. (imagine rotating a TV showing a 3D scene inside a room)


So, the question is: "How can we have `overflow: hidden` and 3D effect at the same time?"

In order to answer this question, we first need to know what 3D is in the first place.

## <a name="3"></a>3. What makes us think a scene is in the 3D space

We look at our screens which are flat 2D surfaces but can tell if what we're looking at is 3D or not. there are two main factors that help us distinguish 2D from 3D:

###<a name="3-1"></a>1. Scale

Elements that are closer to us appear bigger and vice versa, elements that are further away appear smaller. but we don't need this in our scene as mentioned before so we can ignore it.

### <a name="3-2"></a>2. Movement during rotation

Elements that are closer to us move more according to the rotation angle and elements that are further away move in the opposite direction. elements in between have less movement. (If you hold a pen with the tip facing you, when you rotate it from the middle, the tip will move in the rotation direction, the middle will not move and the back will move in the opposite direction. and the more the rotation angle, the higher the movement difference will be.)

We can mimic this behavior by moving some elements in the rotation direction and some in the opposite direction. the elements in between will have less movement or no movement at all. the amount of movement will determine how close or far the elements are from us. (Note that since the container is rotated/tilted already, this is the additional movement on top of it)

> I got this idea after checking [Atropos](https://atroposjs.com/) and seeing that it uses `translate()` to achieve a similar effect.

This is the main idea and the starting point for this component.

## <a name="4"></a>4. Attributes

I decided to use data attributes to implement the idea similar to how Atropos does it. I also tried to keep the value format similar but I've not checked how they are implemented in Atropos, so there could be differences.

### <a name="4-1"></a>- Offset
To implement this idea I've used an `offset` attribute that can be assigned to each element we want to be moved according to the tilt angle:
```html
<img data-parallax-offset="±number" />
```
We can then calculate the amount of movement in the X/Y axis using this simple formula:
```js
translate = tiltAngle / tiltMaxAngle * offset
/*
 * Note:
 * tiltAngle is in the [-tiltMaxAngle - tiltMaxAngle] range.
 * translateX is calculated using rotation around the Y axis and vice versa.
 * We have to reverse/negate the angle around the X axis in the calculation.
 * We set the value as percent and because of the way translate() works, it'll be a percentage of the dimension of the element itself (width for translateX() and height for translateY())
 * This value is multiplied by the offsetMultiplier that is mentioned later.
*/
```
This way elements with higher `offset` values will move more at higher tilt angles and will appear to be in the front, and elements with a negative `offset` will move in the opposite direction and will appear to be in the back. giving the illusion of being in 3D space.

You can see this attribute in action in the [Offset Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes/offset)

### <a name="4-2"></a>- Opacity

I noticed that Atropos also has an [opacity attribute](https://atroposjs.com/docs#control-elements-offsets) that can be used to animate the opacity of the element based on the tilt angle (`start` opacity at center and `end` opacity at max tilt angle) and I decided to implement the same functionality in my component as well.

```html
<img data-parallax-opacity="start;end" />
```

For the implementation, I used the same [mapping method](https://dev.to/rashidshamloo/react-next-tilt-and-react-flip-tilt-npm-packages-24p0#the-line-glare-effect) I used in the development of [react-next-tilt](https://www.npmjs.com/package/react-next-tilt).

If we want to animate the opacity from one edge to the other (`tiltAngle/tiltMaxAngle = [-1 - 1]`) from start to end (`[start - end]`) we can use this mapping:

Mapping `[-1 - 1]` to `[start - end]`:
`+ 1 = [0 - 2] => / 2 = [0 - 1] => * (end - start) = [0 - (end-start)] => + start = [start - end]`

And since we want to animate from the center to the edge, we can use `Math.abs(tiltAngle/tiltMaxAngle) = [0 - 1]` instead and drop the first two steps:

Mapping `[0 - 1]` to `[start - end]`:
`* (end - start) = [0 - (end-start)] => + start = [start - end]`

You can see this attribute in action in the [Opacity Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes/opacity)

### - <a name="4-3"></a>Scale, Rotation, and Skew

I also added attributes and animations based on tilt angle for Scale, Rotation, and Skew in a similar manner.

```html
<img data-parallax-scale="start;end" />
<img data-parallax-rotation="start;end" />
<img data-parallax-skew="start;end" />
```

You can see these attributes in action here:
[Scale Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes/scale) - [Rotation Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes/rotation) - [Skew Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes/skew)

While implementing these attributes, I kept performance and usability in mind. while animating these attributes makes use of transform functions, my implementation doesn't replace the whole `transform` property and only overwrites/replaces the required functions so you can use other transform functions at the same time as using the desired attribute. A list of what transform functions each attribute overwrites/replaces is available in the [readme](https://www.npmjs.com/package/react-next-parallax#attributes).

## <a name="5"></a>5. Animation Modes

Since I already figured out how to animate each attribute from edge to edge instead of center to edge, I decided to add this as an option/prop.

I implemented separate modes/calculations for the `X` and `Y` axes as well as an option that will animate the value using both `X` and `Y` tilt angles (from top left to bottom right).

In total there are 4 animation modes available:

- 'center-to-edge'
- 'edge-to-edge-x'
- 'edge-to-edge-y'
- 'edge-to-edge-both';

You can see them in action in the [Attributes Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes)

## <a name="6"></a>6. Animation Reverse

After implementing the different animation modes, I thought it could be useful to be able to animate each attribute in reverse.(instead of being the `start` value at the center and `end` at the max angle, being `end` value at the center and `start` at the max angle, or instead of animating from `start` to `end` when hovered from left to right, animating from `start` to `end` when hovered from right to left)

I also decided to add fine-grained control over which attribute we want to reverse (because for example after setting up the offsets, we don't want to change it and want to only change other attributes).

In total, animation reverse has 8 modes:

- 'all'
- 'all-except-offset'
- 'offset'
- 'opacity'
- 'scale'
- 'rotation'
- 'skew'
- 'none'

## <a name="7"></a>7. Multipliers

While making the demos and setting up the scenes I found myself changing the offset values manually a lot to get the effect and movement speed I wanted so I decided to add an `offsetMultiplier` that allows for easy adjustment of all offset values. I later added a multiplier for all other attributes as well.

You can see the `offsetMultiplier` in action in the [Attributes Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes)

## <a name="8"></a>8. Animating elements that are being manipulated by the component

In the [main demo](https://rashidshamloo.github.io/react-next-parallax_demo) for the component, there are two balloons that I've animated using [CSS keyframe animations](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) and `transform: translateX/Y()` functions. However, one of them also has an offset attribute set so its `transform: translateX/Y()` functions are also manipulated by the component at the same time.

This caused the CSS animation to override/ignore the `transform: translate()` set by the component and the element didn't move according to the tilt angle.

I tried using the [Web Animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to animate the element instead of @keyframes but the result was the same. and animating using the `left` and `top` properties resulted in jittery/not smooth movement.

I then remembered about the separate [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate) property we can use instead of [`transform: translate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate) and after using it, both the CSS animation and the components `translate()` manipulation worked at the same time without interfering with each other.

Also another workaround I figured out while writing the documentation is putting the element inside a parent/container and animating it instead of the element itself while the element is being manipulated by the component.

## <a name="9"></a>9. Multi-component setup

Atropos has a multi-component demo on its website and after seeing it, I figured I could achieve a similar result with my component, using the [controlElement](https://rashidshamloo.github.io/react-next-tilt_demo/control-element) prop I developed for [react-next-tilt](https://www.npmjs.com/package/react-next-tilt) from the start that allows the component to be manipulated by other elements. That element could be another component as well which means it's a matter of putting multiple components inside another component and setting their control Element to the parent component.

After implementing it, I am really happy with the result. plus I can use all the other attributes I've added to rotate, scale, skew, etc. each of the contained components at the same time which results in really cool effects.

Here is a preview of what it looks like:

{% youtube KC4wdwSSbNM %}

I plan to polish it more, add some presets for easy setup and use, and publish it as a separate component.

## <a name="10"></a>10. Improvements to react-next-tilt

In the process of developing this component, I needed some extra functionality that I first implemented in this component then ported back to [react-next-tilt](https://www.npmjs.com/package/react-next-tilt) and added as core functionality which resulted in it gaining some new features including:

- Support for setting `TiltRef`, `FlipTiltRef`, and `ParallaxRef` as `controlElement` ([commit](https://github.com/rashidshamloo/react-next-tilt/commit/bf5fb413c5b15addab5dc74d3d832272def9d52b))
- `onReset()` callback function ([commit](https://github.com/rashidshamloo/react-next-tilt/commit/e9e01473a088a28eab0d0cae66090f92584873d2))
- `preserve3dEnable` prop ([commit](https://github.com/rashidshamloo/react-next-tilt/commit/bf5fb413c5b15addab5dc74d3d832272def9d52b))
- `shadowType` prop ([commit](https://github.com/rashidshamloo/react-next-tilt/commit/7b8ae1cd0b655685307ea1247185136d3ee51f76))
- `'all'` position for `spotGlarePosition` prop ([commit](https://github.com/rashidshamloo/react-next-tilt/commit/644e30620722a7045eccfac65fd5160d1d0db72c))
- `spotGlareSizePercent` prop ([commit](https://github.com/rashidshamloo/react-next-tilt/commit/38891b3418d1666059c512c79994c69895a1a8dd))
- `gyro` argument for the `onTilt()` callback function ([commit](https://github.com/rashidshamloo/react-next-tilt/commit/f2cfbf699d274e012c55feb2db3d618074ef278c))

---
<small>Images used in this article and demos are by [Yuliya Pauliukevich](https://www.vecteezy.com/members/klyaksun) on [vecteezy.com](https://www.vecteezy.com/)</small>