Personal design study · Motion

Motion Showcase

I explored five ways to use motion on a webpage: text entrances, scrolling effects, cursor responses, grid reveals, and moving type.

GSAP · ScrollTrigger · vanilla JS

scroll to explore ↓

What it is

I built five browser motion examples using GSAP: text entrances, scroll-based reveals, cursor responses, grid reveals, and moving type. The examples let me compare when motion helps an interaction.

What I explored

I explored how motion can guide attention and respond to a person’s actions.

Skills and tools

GSAP + ScrollTrigger — five production patterns
No-framework architecture — the source is the spec
Reduced-motion handling baked in
Performance-aware: 60fps under scrub

GSAP ScrollTrigger Vanilla JS CSS

The Brief

Five techniques. One file. No framework.

I used text entrances to introduce a page, scrolling effects to pace a story, cursor responses to signal interaction, staggered reveals for lists, and moving type for emphasis.

TECHNIQUE 02 · SCROLL SCRUB · gsap scrolltrigger · scrub

The interaction is the product. Design and build.

each word reveals on scroll · spotlight advances with scroll position

TECHNIQUE 03 · MAGNETIC HOVER · move cursor over each card

Attention
is attracted.

INTERACTION DESIGN

MOTION + ANIMATION

STATE MACHINES

DESIGN SYSTEMS

DATA VISUALIZATION

WEB TOYS

gsap magnetic pattern · elastic.out spring on release

TECHNIQUE 04 · STAGGER REVEAL · scrolltrigger · stagger

The stack.

GSAP + ScrollTrigger

orchestration · sequencing · scroll-driven animation

CSS Animations

keyframes · custom easing · no dependencies

Framer Motion

react component motion · layout animations · presence

Web Animations API

native browser · precise · zero overhead

Canvas + requestAnimationFrame

physics · particles · custom rendering loops

Three.js + WebGL

3d · shaders · immersive experiences