PARALLAX SHOWCASE

Professional depth effects with GSAP ScrollTrigger

Scroll

Multi-Layer Parallax

Multi-layered depth effects with subtle differences

Layer 1

Speed: 0.1 | Position: Top-Left (x: -250, y: -180)

↖

Layer 2

Speed: 0.2 | Position: Top-Right (x: 160, y: -140)

↗

Layer 3

Speed: 0.3 | Position: Bottom-Left (x: -80, y: 150)

↙

Layer 4

Speed: 0.4 | Position: Bottom-Right (x: 110, y: 50)

↘

Dynamic Path Drawing

Real-time SVG animation with various draw effects

Mountains (0.05) - Far
Clouds (0.1) - Medium
Trees (0.15) - Closer
Foreground (0.2) - Closest

Realistic Depth Effect

Full-screen depth effect with real images - each element fills the entire screen

Mountains: Far (scale: 1.3)
Clouds: Medium (scale: 1.2)
Trees: Closer (scale: 1.1)
Foreground: Closest (scale: 1.05)

Speed Variations

Parallax speed differences

0.05

Slow

Minimal movement with subtle scaling - perfect for backgrounds

Effect: y: -30px, scale: 1.05
0.3

Medium

Standard parallax with noticeable scaling - for main elements

Effect: y: -160px, scale: 1.2
0.8

Fast

Intense parallax with dramatic scaling - for accents

Effect: y: -300px, scale: 1.4

Video on Scroll

Progress:
0%
Time: 00:00 / 00:00

Scrub Control

Video position controlled by scroll

Real-time

Smooth synchronization with scrolling

Precise

Exact control of every frame