Web Animations Easy
Kinetic Typography
Word-level animated text entrance pattern for energetic headlines.
gsaptypography
Targets: JS HTML
Code
body { margin: 0; min-height: 100vh; display: grid; place-content: center; background: #050910; color: #f2f6ff; font-family: "Avenir Next", sans-serif; }
.back { position: fixed; top: 14px; left: 14px; color: #86e8ff; text-decoration: none; }
main { display: grid; gap: 1.1rem; text-align: center; }
.line { margin: 0; font-size: clamp(1.8rem, 5vw, 4.3rem); font-weight: 800; }
.line span { display: inline-block; margin: 0 .3rem; }Kinetic Typography
Word-level animated text entrance pattern for energetic headlines.
Source
- Repository:
libs-gen - Original demo id:
05-kinetic-typography
Notes
Word-level animated text entrance pattern for energetic headlines.