Scroll story

Layers move at different depths while the sky changes color as you scroll.

scrollInputuseAnimatedCSSinterpolate

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { useRef } from 'react';
import { input, scrollInput, useAnimated, useAnimatedCSS } from '@kkwaenggwari/animated';
import './styles.css';

const chapters = ['Dawn', 'Climb', 'Summit'];

export default function App({ depth = 1 }) {
  const scroller = useRef(null);

  // 0 at the top of the scroller, 1 at the bottom.
  const progress = useAnimated(
    0,
    (value) => {
      input(scroller, scrollInput({ progressY: value }));
    },
    [],
  );

  const move = (distance) =>
    progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', `${distance * depth}px`] });

  // A color is not a calc() expression, so it gets its own CSS value.
  const sky = useAnimatedCSS(
    progress.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: ['#5c7cff', '#8fb0ff', '#0b1440'],
    }),
  );

  return (
    <div className="stage">
      <div ref={scroller} className="scroller">
        <div className="scene" style={{ background: sky }}>
          <span className="sun" style={{ transform: `translateY(${move(-150)})` }} />
          <span className="hill far" style={{ transform: `translateY(${move(-50)})` }} />
          <span className="hill near" style={{ transform: `translateY(${move(-110)})` }} />
          {chapters.map((chapter, index) => {
            const at = index / (chapters.length - 1);
            const opacity = progress.interpolate({
              inputRange: [at - 0.3, at, at + 0.3],
              outputRange: [0, 1, 0],
              extrapolate: 'clamp',
            });
            return (
              <h3 key={chapter} style={{ opacity }}>
                {chapter}
              </h3>
            );
          })}
        </div>
        <div className="spacer" />
      </div>
      <p>Scroll inside the frame.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.scroller {
  height: 340px;
  border-radius: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.scene {
  position: sticky;
  top: 0;
  height: 340px;
  overflow: hidden;
}

.sun {
  position: absolute;
  left: 58%;
  top: 150px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #ffffff;
}

.hill {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50% 50% 0 0;
}

.far {
  bottom: -180px;
  height: 320px;
  background: #4a6bff;
}

.near {
  bottom: -240px;
  left: -40%;
  height: 360px;
  background: #16181d;
}

.scene h3 {
  position: absolute;
  inset: 32px 28px auto;
  margin: 0;
  color: #fff;
  font-size: 34px;
}

.spacer {
  height: 1100px;
}

.stage p {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

How it works

scrollInput({ progressY }) writes the scroller's progress from 0 to 1 into one value.
Each layer interpolates that value to its own distance, so the parallax is pure calc().
The sky color is not a calc() expression, so useAnimatedCSS gives it its own variable.
Chapter titles fade in and out over their own part of the progress.

Scroll story

How it works

More examples

Search