Every element on this page — the nav, these words, the cards below — appeared through a GSAP timeline. Read script.js to see exactly how.
Animate FROM the current state TO new values. The most common tween.
gsap.to('.box', { x: 100, opacity: 0, duration: 0.5 })
Animate FROM given values TO the current state. Perfect for entrances.
gsap.from('.hero', { y: 32, opacity: 0, duration: 0.6 })
Chain multiple tweens in sequence. Control them as one unit.
const tl = gsap.timeline()
tl.from('nav', ...)
tl.from('h1', ..., '-=0.2')
Apply the same animation to multiple elements with a time offset between each.
gsap.from('.card', { y: 20, stagger: 0.1 })
const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });
// 1. Nav slides down
tl.from('#siteNav', { y: -20, opacity: 0, duration: 0.4 })
// 2. Hero label fades in
.from('.hero-label', { opacity: 0, duration: 0.3 }, '-=0.1')
// 3. Title lines come up, staggered
.from('.hero-title span', { y: 40, opacity: 0, duration: 0.6, stagger: 0.1 }, '-=0.1')
// 4. Subtitle and actions
.from('.hero-sub', { y: 16, opacity: 0, duration: 0.45 }, '-=0.3')
.from('.hero-actions > *', { y: 10, opacity: 0, stagger: 0.08, duration: 0.35 }, '-=0.2')
// 5. Concept cards on scroll
// → See ScrollTrigger section belowThe '-=0.2' position parameter means "start 0.2s before the previous animation ends." This overlaps tweens for a smoother feel.