Scroll down to see each section animate into view using GSAP ScrollTrigger.
Get startedWhy it works
Fade-up reveals guide the eye naturally through the page. Each element earns attention in sequence, reducing cognitive load and increasing readability.
Instant feedback
Animations respond to scroll position in real time, with no jank.
Accessible
Respects prefers-reduced-motion — elements show immediately for users who prefer it.
5 lines of JS
GSAP handles all the heavy lifting. You just describe the from-state.
Framework-free
Works with vanilla JS, React, Vue, Astro — any stack that renders HTML.
Customization
Control duration, distance, easing, and the scroll trigger point. GSAP's ScrollTrigger offers precise control over when animations start and end relative to the viewport.
duration
Default 0.7s. Shorter for micro-elements, longer for hero sections.
y offset
Default 40px. Larger values create more dramatic entrances.
ease
power2.out gives a natural deceleration. Try expo.out for luxury feel.
start trigger
"top 85%" means the top of the element hits 85% down the viewport.