Animated Intro - 1

Animating text based on this amazing codepen from Blake Bowen. (This bl.ock is just tested with Chrome)

Using <h1> elements for the text and <span> elements for each letter to color them separately.

See also:

• Animated Intro (1) with
  • text elements: <h1>
  • animation: stars
  • color: individual letters
• Animated Intro (2) with
  • text elements: <h1>
  • animation: stars + rotation
  • color: individual letters
• Animated Intro (3) with
  • text elements: <h1>
  • animation: rotation + stars
  • color: individual letters
• Animated Intro (4) with
  • text elements: <h1>
  • animation: stars
  • color: gradient
• Animated Intro (5) with
  • text elements: SVG <textpath>
  • animation: stars
  • color: gradient
• Animated Intro (6) with
  • text elements: SVG <textpath>
  • animation: stars
  • color: gradient
  • other: background image, show paths + textlength
• Animated Intro (7) with
  • text elements: SVG <textpath>
  • animation: stars
  • color: gradient
  • other: background image, full size