skills/elite-inspiration/references/text-animation-sites.md

Text Animation Inspiration

Award-winning sites with exceptional typography in motion.

---

Character-Level Animation

Obys Agency

URL: https://obys.agency Award: Awwwards SOTD, multiple awards

What to study:

• Character-by-character reveals
• Scroll-linked text animation
• Typography as hero element
• Mixed case styling

Technique: GSAP SplitText, custom easing, scroll-driven

---

Locomotive

URL: https://locomotive.ca Award: Awwwards SOTD

What to study:

• Smooth character stagger
• Masked text reveals
• Section title animations
• Font weight transitions

Technique: SplitText + Locomotive Scroll integration

---

Aristide Benoist

URL: https://aristidebenoist.com Award: Awwwards SOTD

What to study:

• Large display typography
• Character scatter effects
• Hover-triggered animations
• Creative font pairing

Technique: GSAP SplitText, random values, physics-based

---

Word-Level Animation

Basic/Dept

URL: https://www.basicagency.com Award: Awwwards SOTD

What to study:

• Word-by-word reveals
• Clean, professional feel
• Scroll-triggered timing
• Hierarchy through motion

Technique: GSAP SplitText (words), intersection observer

---

Rally

URL: https://rallyinteractive.com Award: Awwwards SOTD

What to study:

• Word cascade animations
• Playful timing
• Portfolio item titles
• Navigation text effects

Technique: GSAP timelines, SplitText

---

Line-Level Animation

Apple

URL: https://www.apple.com/apple-intelligence/ Award: Industry standard

What to study:

• Line-by-line reveals
• Scroll-synchronized timing
• Headline hierarchy
• Subtext fade in

Technique: Native intersection observer, CSS animations

---

Stripe

URL: https://stripe.com Award: Multiple awards

What to study:

• Headline reveals
• Gradient text animation
• Code block animations
• Professional pacing

Technique: CSS animations, intersection observer, GSAP

---

Masked Reveals

Elegant Seagulls

URL: https://www.elegantseagulls.com Award: Awwwards SOTD

What to study:

• Text clip-path reveals
• Scroll-linked masks
• Creative typography
• Color reveals

Technique: CSS clip-path + GSAP

---

Monopo London

URL: https://monopo.london Award: Awwwards Honorable Mention

What to study:

• Vertical mask reveals
• Staggered timing
• Bold typography choices
• Section transitions

Technique: Overflow hidden + transform

---

Kinetic Typography

Resn

URL: https://resn.co.nz Award: Multiple FWA

What to study:

• Playful character physics
• Interactive text
• Experimental layouts
• Sound integration

Technique: Custom JS, WebGL text, GSAP

---

Active Theory

URL: https://activetheory.net Award: Multiple awards

What to study:

• Text distortion effects
• WebGL-enhanced type
• Responsive typography
• Performance optimization

Technique: Three.js text, GSAP

---

Key Patterns Observed

Entry Animation Types

Character level:
- Fade up stagger
- Rotation in
- Scale from center
- Random scatter → organized
- Typewriter effect

Word level:
- Slide up mask
- Fade stagger
- Scale pulse
- Blur → sharp

Line level:
- Y translate up
- Opacity fade
- Clip-path reveal

Timing Patterns

Fast reads (headlines):
- Total duration: 0.6-1s
- Stagger: 0.02-0.05s

Slow reads (body text):
- Total duration: 1-2s
- Stagger: 0.05-0.1s

Scroll-linked:
- Start: entry 0%
- End: cover 30-50%

Easing Choices

Premium feel:
- power3.out (most common)
- power4.out (dramatic)
- expo.out (very smooth)
- custom cubic-bezier

Playful feel:
- back.out (bounce)
- elastic.out (spring)

---

Implementation Reference

Character Stagger

const split = new SplitText('.hero-title', { type: 'chars' });

gsap.from(split.chars, {
  opacity: 0,
  y: 50,
  rotationX: -90,
  stagger: 0.02,
  duration: 0.8,
  ease: 'power3.out'
});

Masked Line Reveal

const split = new SplitText('.text', {
  type: 'lines',
  linesClass: 'line-wrapper'
});

// Wrap each line for mask
split.lines.forEach(line => {
  const wrapper = document.createElement('div');
  wrapper.className = 'line-mask';
  line.parentNode.insertBefore(wrapper, line);
  wrapper.appendChild(line);
});

gsap.from('.line-wrapper > *', {
  yPercent: 100,
  stagger: 0.1,
  duration: 0.8,
  ease: 'power3.out',
  scrollTrigger: {
    trigger: '.text',
    start: 'top 80%'
  }
});

Gradient Text Animation

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

---

Questions to Ask

When studying these sites:

1. Is animation character, word, or line based?
2. What's the total animation duration?
3. How does it interact with scroll?
4. What's the easing curve?
5. How does it handle responsive text?
6. Does the animation reveal meaning or just look cool?