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 a color gradient.
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