Back to Design System

Animation Showcase

Scroll to run each effect

Framer MotionGSAPLenisViewTransitionZod
01

Reveal presets

fade
slide-up
slide-down
slide-left
slide-right
zoom-in
zoom-out
blur
clip-up
clip-down
clip-left
clip-right
clip-center
rotate
flip-x
flip-y
skew
02

Text

Lines

Each line rises from behind its own mask and stays correct when the text wraps.

Words

Each word comes into focus one after another across the sentence.

Characters

Every single character fades in on its own beat.

03

Gallery transitions

Ember

Ember. Use the arrow keys or swipe.

04

Stagger and numbers

17

Reveal presets

8

Gallery transitions

35

Hook files

18

Components

05

Pointer

Magnetic
Tilt with glare
06 Pinned scene

Pin the section

Scrub with the scrollbar

Release and continue

07 Horizontal scroll

1. One

07 Horizontal scroll

2. Two

07 Horizontal scroll

3. Three

07 Horizontal scroll

4. Four