Lab — Components · Victor Zhang

02Parallax Speed Control

Elements scroll at different speeds. <1 = slower, 1 = normal, >1 = faster. Creates depth and layering.

Scroll inside to see parallax

0.6x

0.8x

1.0x

1.2x

1.5x

2.0x

03Auto Parallax Images

Images inside overflow:hidden containers get automatic parallax. The image shifts within its container as you scroll.

Scroll inside to see image parallax

04Layered Text Parallax

Multiple text layers at decreasing speeds create a trailing ghost/echo effect as you scroll.

Scroll inside to see text separation

scrolling

05SplitText + Lag Effect

Each character has increasing lag, creating a cascading "follow-through" wave as you scroll.

Scroll inside to see character lag

06Full-Width Parallax Slab

A full-width image with strong parallax (180% height). Creates a dramatic "window" effect between content sections.

Scroll inside to see slab parallax

Content above the slab...

Content below the slab...

08MorphSVG Path Morphing

One SVG path smoothly transforms into another. Click play to morph between shapes.

09Multi-State Cape Animation

Two SVG states morph back and forth, simulating a flowing cape. Each sub-path morphs to its corresponding counterpart.

10Character Body Part Animation

A character built from individual parts, each animating in separately with stagger and back.out easing.

Head

Body

L Arm

R Arm

L Leg

R Leg

Shoe

11Concentric Circle Animation

Three nested circles scale in from center outward with staggered timing, then the outer ring rotates continuously.

12SVG Text Reveal (Per-Letter)

Individual letter paths animate in with y-offset and stagger, using back.out easing for a bouncy entrance.

M o r p h S V G

13Scrubber / Interactive Timeline

Drag the handle to scrub through the animation timeline. The square's rotation and scale follow your drag position.

0% 50% 100%

14Visibility Toggle Pattern

Elements start hidden (visibility:hidden + opacity:0), then reveal with gsap.set() for instant or gsap.to() for animated.

Box 1

Box 2

Box 3

Box 4

16Scroll-Triggered Rotation

An element rotates 360deg when its section scrolls into view. Uses toggleActions to restart/pause on enter/leave.

Scroll to the purple section

Scroll down to trigger rotation...

↓

This element spins on enter

Scroll back up to re-trigger

17Scroll-Triggered Background Color

Background and text colors transition when the section enters view. Reverses when scrolling back up.

Scroll to the middle section

Scroll down...

↓

Background will change

Watch the color transition

Scroll back up to reverse

18Scroll-Triggered Yoyo Scale

Element continuously pulses (scales up/down) while its section is in view. Pauses when scrolled away.

Scroll to the yoyo section

Scroll down...

↓

Yoyo!

Pulsing while in view

Scrolled away = paused

19Clamped Parallax Speed

Parallax that respects natural start/end positions. Elements start in their CSS position, parallax mid-scroll, return to natural position at end.

Scroll inside — elements return to position at edges

20DrawSVG — Stroke Drawing

SVG stroke animates from 0% to 100%, appearing as if being drawn. Uses stroke-dasharray/dashoffset under the hood.

21Scrub — Scroll-Linked Progress

Animation progress tied 1:1 to scroll position. Scroll down = play forward, scroll up = reverse. No timer involved.

Scroll inside — animation follows your scroll position

start: top center end: bottom center

23Pin — Fixing Element During Scroll

The heading stays pinned (sticky) while content scrolls past it. pinSpacing:false means content flows underneath.

Scroll inside — heading stays fixed

Pinned Heading

Image 1 scrolls past

Image 2 scrolls past

Image 3 scrolls past

Image 4 scrolls past

Image 5 scrolls past

24Mix-Blend-Mode Difference

Text uses mix-blend-mode:difference to stay readable over any background. Colors invert where text overlaps colored blocks.

Scroll inside — watch text invert over colored blocks

BLEND

Light block

White block

Green block

Black block

Pink block

GSAP Green block

25Default — play none none none

Line plays once on enter. Scrolling away or back has no effect — fire and forget.

Scroll down to the red section

Scroll down to trigger the line animation...

↓

RED — Play Once

idle

This line plays when it enters the viewport, then takes no other actions. Default toggleActions: "play none none none"

Scroll back up — nothing changes

26restart pause resume pause

Restarts fresh each enter, pauses on leave, resumes (not restarts) when scrolling back, pauses again on leave back.

Scroll down to the purple section

Scroll down to trigger...

↓

PURPLE — Restart / Resume

idle

restart on enter, pause on leave, resume on scroll back, pause on leave back. toggleActions: "restart pause resume pause"

Scroll back up — line resumes from where it paused

27play complete reverse reset

Full lifecycle control. Plays forward on enter, completes on leave, reverses on scroll back, resets on leave back.

Scroll down to the orange section

Scroll down to trigger...

↓

ORANGE — Full Lifecycle

idle

play on enter, complete (snap to end) on leave, reverse on scroll back, reset (snap to start) on leave back. toggleActions: "play complete reverse reset"

Scroll back up — line reverses, then resets to 0

28play pause resume pause + custom start/end

Animation plays within a custom scroll zone (top center → top 100px). Infinite repeat loop runs only while in the zone.

Scroll down to the green section

Scroll down to trigger...

↓

GREEN — Bounded Repeat

idle

play from start: "top center", pause at end: "top 100px". Scrolling back resumes, leaving again pauses. Infinite repeat: -1 runs within this zone. toggleActions: "play pause resume pause"

Scroll back up — loop resumes, then pauses outside zone

29Basic Scrub — Scroll-Linked Line

Line scales from 0 to full width as it scrolls through the viewport. Scroll position = animation progress. No timer.

Scroll slowly — the line tracks your scroll position exactly

Scroll down — the line will begin drawing as it enters...

↓

RED — scrub: true

0%

scrub: true — line scales from start: "top bottom" to end: "top top". Scroll back up to reverse.

Scroll back up — line reverses

30Scrub + Pin — Pinned Section

Panel pins to the top while a line animates with scroll. After scrolling 100% viewport height, it unpins.

Scroll — the orange panel will pin while the line animates

Scroll down to reach the orange panel...

↓

ORANGE — scrub + pin

0%

This panel is pinned. The line animates over end: "+=100%" of scroll distance. After that, the panel unpins.

Panel has unpinned — normal scrolling resumes

31Scrub + Pin + Timeline — Multi-Property

Multiple animations in a timeline all synced to scroll: paragraph transforms, line draws, and background color changes simultaneously.

Scroll — paragraph, line, and background all animate together

Scroll down to the green panel...

↓

GREEN — scrub + pin + timeline

Multiple animations in sync

0%

Timeline: paragraph scales+rotates in, line draws, background transitions to green — all parallel, all scroll-linked.

Panel has unpinned — done!

32ScrollSmoother Image Grid — Auto Parallax

Full image grid with auto-calculated parallax on every image. Images are 160% height inside overflow:hidden containers. Scroll to see each image shift independently.

Scroll inside — every image parallaxes automatically

smoother.effects("img", { speed: "auto" }) — one line for all images

33DrawSVG Stroke on Scroll — Pinned Annotation

SVG stroke draws around a word as you scroll, simulating DrawSVGPlugin + scrub. The heading stays pinned while the stroke animates.

Scroll slowly to see the stroke draw around "Clamp"

Clamp your triggers

draw: 0%

34Images Through Pinned Text — Clamp + Blend

Images scroll past a pinned heading at different speeds. mix-blend-mode: difference inverts text color where images overlap. Combines clamped parallax + pin + blend mode.

Scroll to see images pass through the text — colors invert on overlap

CLAMP

35ScrambleText — Animated Text Scrambling

Text scrambles through random characters before revealing the final message. Customize with lowercase, uppercase, numbers, or custom character sets. Click to replay.

36SplitText Lines — Per-Line Reveal

Split text into lines and animate each line with stagger. Lines slide up from clip boundaries for a polished reveal effect. Click to replay.

This is the first line of animated text. Here comes the second line with a reveal. And the third line completes the effect.

37Full-Screen Section Transitions

Full-viewport sections slide in/out with parallax backgrounds and staggered character reveals. Uses Observer for wheel/touch navigation. Scroll or click arrows to navigate.

Scroll Down

Animated GSAP

GreenSock

Keep Scrolling

1 / 4

38Variable Height Stacked Pinning

Panels pin and stack on top of each other as you scroll. Each panel covers the previous one. Supports variable heights + snap-to-panel.

Scroll inside — panels stack and snap

1

2

3

4 39Layered Pinning from Bottom

Panels slide up to reveal the next one underneath. Creates a "peeling away" effect with reversed z-index stacking and staggered yPercent animations.

Scroll inside — panels slide up to reveal content below

1

2

3 403D Perspective Scroll Engine

CSS perspective + preserve-3d creates a true 3D space. Cards loop infinitely via modulo math, fog fades by Z-distance, and dynamic FOV warps on velocity. Scroll inside to fly through 3D space.

Scroll inside to fly through 3D space

Z: 0 VEL: 0.00 FOV: 1000

41Neon Flicker Text Morph

Short phrase flickers in letter-by-letter like a neon sign powering on, then shared keywords animate to their positions in the full title while remaining words flicker in. 5-stage opening animation sequence.

Helping our partners build original brands that shine.

42Animated Beam — Node Connections svg

Animated gradient beams flow between DOM nodes via SVG cubic-bezier paths. Uses getPointAtLength() to slide a linearGradient "window" along each curve. Inspired by Magic UI's AnimatedBeam.