This is in early development. Please share any ideas or issues on Github

ParallaxX

A lightweight, framework-agnostic toolkit for implementing parallax and fade effects that leverage the native ScrollTimeline API

✅ Minuscule footprint (<5kb)
✅ Easy to use
✅ Maximum performance

no polyfill

with polyfill

Fast

By utilizing native browser capabilities and minimizing reliance on JavaScript, ParallaxX outperforms animation frameworks that compute animations on the main thread.

Accessible

Respects user preferences for reduced motion.

Simple

Opinionated presets make it extremely easy to add nice parallax effects to your project. Plus there's no need to write a single line of CSS.

Limited

Functionality is restricted by what browsers support natively. If you need advanced tweening, consider a more complete solution like GSAP

"overflow: hidden" prevents effects from running on children. "overflow: clip" can be used instead.

Only supports vertical scrolling and Y axis translations (at the moment).

Getting Started

Install

npm i @parallaxx/toolkit

Import

import {ParallaxX, TranslatePreset, OpacityPreset, RangePreset} from "@parallaxx/toolkit";
import "@parallaxx/toolkit/dist/parallaxx.css";

Initialize

useLayoutEffect(() => {
  new ParallaxX()
}, [])

Use

<div data-pxx-translate={TranslatePreset.FAST} data-pxx-opacity={OpacityPreset.FADE_IN} />

Parallax Effects (Translate)

Translate the element along the Y-axis as it moves through the view.

<div data-pxx-translate={TranslatePreset.FAST} />

Translate Presets

There are 5 Translate Presets to choose from:

TranslatePreset.SLIDE_IN

TranslatePreset.SLOWER

TranslatePreset.SLOW

TranslatePreset.FAST

TranslatePreset.FASTER

Custom Values

Custom values must be 3 comma separated string values. These define the enter (0%), middle (50%), and exit (100%) values of the Y translation as the element moves through the view. Values can be any valid CSS translate3d value.

The following would animate the element from 10vh as it enters the view, to 0 as it aligns in the viewport, and then to -10vh as it exits at the top.

<div data-pxx-translate="10vh,0,-10vh" />

"10vh,0,-10vh"

Random Values
"random(80|200),0,random(-80|-200)"

Fade Effects (Opacity)

Fade the element as it moves through the view.

<div data-pxx-opacity={OpacityPreset.FADE_IN} />

Opacity Presets

There are 5 Opacity Presets to choose from:

OpacityPreset.FADE_IN

OpacityPreset.FADE_OUT

OpacityPreset.FADE_IN_OUT

OpacityPreset.HALF_FADE_IN

OpacityPreset.HALF_FADE_IN_OUT

Custom Values

Custom values must be 3 comma separated string values. These define the enter (0%), middle (50%), and exit (100%) opacity values as the element moves through the view. Values can be any number between 0 and 1.

<div data-pxx-opacity="0.2,1,0.6" />
In this example the element will fade from 20% opacity to 100% as it enters and aligns in the viewport, and then down to 60% as it exits at the top.

"0.2,1.0,0.6"

"1.0,1.0,0.3"

Start and End (Timeline Range)

Control when the animation timeline starts and ends.

<div data-pxx-range={RangePreset.CONTAIN} />
With "cover" (default) the timeline begins as the element starts to enter the view, and ends when it has completely left. With "contain" it begins after the entire element has entered the view, and ends before it starts to leave.

Range Presets

There are 2 Range Presets to choose from:

RangePreset.COVER

RangePreset.CONTAIN

Custom Values

OpacityPreset.FADE_IN_OUT
"contain 0% contain 60%"

Random Values

256 elements with random translate values.

<div data-pxx-range={RangePreset.CONTAIN} data-pxx-translate="0,random(-20|-160),-15vh"