MotionBaseAnimation Knowledge Base
13 of 13 patterns
SCROLL ↓
📌Pinned Narrative

Sekcja przypięta na 200–400% viewportu. Warstwy contentu wchodzą warstwowo przy scrollu.

scroll-linkedcinematicGSAP preferred
0:000:05
🎬Scroll-Scrubbed Media

Scroll steruje timecode video lub progresem animacji 3D. Apple / product launch vibe.

scroll-linkedcinematicGSAP preferred
3 LAYERS
🌊Layered Parallax Hero

BG / mid / FG poruszają się z różnymi prędkościami — iluzja głębi.

scroll-linkedsmoothGSAP / Framer
Grid Stagger Reveal

Karty wchodzą sekwencyjnie ze staggerem, skalą i maską. Feature lists, galerie.

on-entersnappyGSAP / Framer
MOTION
DESIGN
✂️Split Text Reveal

Litery / linie wychodzą z maski clip-path. Kinetic typography, hero headlines.

on-entersnappyGSAP SplitText
Step 01
Step 02
Step 03
🃏Scroll-Stacked Deck

Kolejne sekcje nakładają się jak talia kart — sticky + translate + scale.

scroll-linkedpreciseGSAP preferred
HOVER ME
🧲Magnetic Hover

Element z fizyką sprężyny podąża za kursorem. CTA, interaktywne kafle.

hoverplayfulFramer / vanilla JS
Page Transition

Pełnoekranowy mask-reveal lub slide między routami SPA.

route-changecinematicFramer / GSAP
01
02
03
04
SCROLL → HORIZONTAL
Horizontal Scroll

Pionowy scroll konwertuje na poziomy ruch sekcji. Galerie, timelines, product showcases.

scroll-linkedsmoothGSAP preferred
240+
PROJECTS
98%
HAPPY
2.4M
LINES
🔢Counter Up

Liczniki animowane do wartości docelowej przy wejściu w viewport. Stats, metrics, kPIs.

on-entersnappyGSAP / Framer
AMBIENT BG
🫧Morphing Blob

SVG path albo border-radius morphuje między kształtami — ambientowe tło z osobowością.

ambientplayfulGSAP / CSS
Clip-Path Reveal

Elementy wchodzą przez animowany clip-path — inset, polygon lub circle wipe. Elegant, editorial.

on-entercinematicGSAP / Framer
HOVER
🃏3D Card Tilt

Karta reaguje na pozycję myszy w 3D (perspective + rotateX/Y). Glare efekt opcjonalnie.

hoverplayfulFramer / vanilla JS