Motion Showcase
Ken Burns
One still photograph, moved like a camera would move it. Scroll — every effect below is scrubbed to your scroll position, so you drive the shot. Nothing here is video.
01Push-in
push-in — scale 1 → 1.15
gsap.fromTo(img, { scale: 1 }, { scale: 1.15, ease: 'none', scrollTrigger: { scrub: 0.6 } })02Pull-out
pull-out — scale 1.2 → 1
gsap.fromTo(img, { scale: 1.2 }, { scale: 1, ease: 'none', scrollTrigger: { scrub: 0.6 } })03Pan
pan — xPercent -8 → 8 at 130% width
gsap.fromTo(img, { xPercent: -8 }, { xPercent: 8, scrollTrigger: { scrub: 0.6 } }) // img width: 130%04Drift + zoom
drift+zoom — pan and scale, split eases
tl.fromTo(img, { scale: 1 }, { scale: 1.12, ease: 'power1.in' }, 0).fromTo(img, { xPercent: -5 }, { xPercent: 5, ease: 'sine.inOut' }, 0)05Rack focus
rack focus — pre-blurred crossfade
Detail arrives when the eye is ready for it.
tl.fromTo(zoomWrap, { scale: 1.06 }, { scale: 1 }, 0).fromTo(blurLayer, { autoAlpha: 1 }, { autoAlpha: 0 }, 0) // pre-blurred crossfade06Tilt drift
tilt drift — rotation -1.5° → 0 under zoom
gsap.fromTo(img, { rotation: -1.5, scale: 1.1 }, { rotation: 0, scale: 1.2, scrollTrigger: { scrub: 0.6 } })07Ken Burns chain
chain — 3 shots crossfade while each keeps moving
tl.fromTo(shot2, { autoAlpha: 0 }, { autoAlpha: 1 }, 3.4) // pinned, scrub: 1, end: '+=150%'08Parallax crop
parallax crop — image travels slower than its frame
gsap.fromTo(img, { yPercent: -12 }, { yPercent: 12, scrollTrigger: { scrub: 0.6 } }) // img height: 140%Where next
These single-image moves are the quiet baseline. The next page adds real depth — layers moving at different rates.