piskaty
piskaty
hello@piskaty.at
all experiments
interaction study · example

Scroll drift

A little movement, borrowed from your scroll.

Set the movement, then scroll. The photographs respond to your scroll velocity and settle gently.

Customize

0.65
Clouds drifting around mountain peaks above green hills.
study 01lenis + gsap
Power lines silhouetted against an orange sunset.
study 02lenis + gsap
A winding pale path through a dark forest.
study 03lenis + gsap
A round cluster of pale flowers against a dark green background.
study 04lenis + gsap

The idea

An image moves a small distance inside its frame in response to scroll speed. When scrolling stops, it settles back into place. This working example explores that interaction using the photographs supplied for this site.

How it works

Lenis provides the scrolling signal. A shared GSAP ticker updates Lenis, and GSAP smoothly moves each image toward a bounded offset.

Example
typescript
const limit = Math.min(12, imageHeight * 0.04);const offset = gsap.utils.clamp(-limit, limit, velocity * 0.32);

The image is slightly larger than its frame so the movement never reveals an empty edge. A short settling animation returns it to its original position.

Keep it subtle

The offset is deliberately small. On touch screens, native scrolling remains in control. When reduced motion is requested, smoothing and parallax are disabled.

This is a demonstration built for the first version of this website.

A small piece of the motion

Clamp the incoming velocity before mapping it to an offset. This keeps the movement restrained even during a fast scroll. The simplified excerpt below shows the mapping; the full demo also handles setup, cleanup and reduced motion.

Example
typescript
const offset = Math.max(-12, Math.min(12, velocity * 0.3));
gsap.to(image, {  y: offset,  duration: 0.6,  ease: "power3.out",  overwrite: true,});

Inline code such as velocity stays part of the paragraph.

Controls

Use the shared Customize panel to reduce the intensity, reverse the direction or turn motion off. The multiplier stays between -1 and 1 so the existing image overscan remains sufficient. Reset restores the quieter 0.65 intensity. System reduced-motion preferences still take precedence.