Motion Showcase
Reveals
How type and imagery enter the frame. Scroll — each pattern below fires as it reaches your viewport, and two of them pin the page and scrub with your thumb.
gsap.from(chars, { yPercent: 120, stagger: 0.03, ease: 'power4.out' })gsap.from(lines, { yPercent: 110, stagger: 0.14 }) // overflow:hidden wrappersgsap.from(words, { yPercent: 100, rotationX: -70, opacity: 0, stagger: 0.05 })04 · Clip-path curtain
gsap.fromTo(img, { clipPath: 'inset(0 0 100% 0)' }, { clipPath: 'inset(0)' })05 · Blinds wipe
gsap.to(slices, { scaleY: 0, transformOrigin: 'top', stagger: 0.09 })06 · Circle iris
clipPath: 'circle(0% at 30% 40%)' → 'circle(150% at 30% 40%)'
The wordmark is a window — amber liquid pours through the letters as you scroll.
canvas-rendered text mask + gsap.fromTo(texture, { xPercent: -18 }, { xPercent: 18, scrollTrigger: { scrub: 1 } })127
events hosted
24
rooms in the lodge
96
five-star reviews
gsap.from(nums, { textContent: 0, snap: { textContent: 1 }, once: true })The ridge line is drawn by your scroll — pinned, scrubbed, reversible.
gsap.set(path, { strokeDasharray: len, strokeDashoffset: len }); gsap.to(path, { strokeDashoffset: 0, scrollTrigger: { scrub: 1 } })