Scroll Depth Layers
A parallax scene where every layer derives from one shared scroll source.
DOM + CSS1 dep1 file · 3 KB TSX
Props
"use client";
import { createContext, useContext, useRef, type ReactNode } from "react";
import { motion, useScroll, useTransform, type MotionValue } from "framer-motion";
const DepthContext = createContext<{
progress: MotionValue<number>;
intensity: number;
} | null>(null);
export function ScrollDepthScene({
children,
intensity = 1,
fadeEdges = true,
showLabel = true,
label = "Depth layers",
}: {
children: ReactNode;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this animation
Scroll parallax is usually assembled per element: every layer calls `useScroll` itself and computes its own transform. It works until the page is under load, at which point several observers watching the same element can report on different frames and the layers visibly slip out of register. Creating one scroll source for the scene and sharing it through context removes that class of bug entirely — all layers are derived from the same value, so they are synchronised by construction rather than by luck. Tying that source to the section's own passage through the viewport, via the start-end to end-start offset, is what makes the component portable: drop it anywhere on a page and the timing is identical, with no magic numbers to retune when a section moves. Depth is signed so negative layers move against the scroll and positive ones with it, which is the relationship that produces recession rather than a uniform drift. As with any Framer scroll composition, each layer has to be its own component, because `useTransform` cannot be called inside a map callback once the list length can vary.
Curator’s note
Built for viberdy 2.1 as the scroll counterpart to Pointer Parallax Scene. One observer, many derived layers.
