h1(data-splitting='chars') Coooool!
View Compiled
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&display=swap')

body
  min-height 100vh
  display flex
  align-items center
  justify-content center
  background hsl(0, 0%, 15%)
  
h1
  font-family 'Roboto Mono', monospace
  font-size 7rem
  text-align center
  
.char
  font-variation-settings 'wght' var(--weight, 100)
  color 'hsl(%s, %s, 65%)' % (var(--hue) calc(var(--saturation) * 1%))
  
View Compiled
Splitting()
gsap.set('.char', {
  '--hue': gsap.utils.distribute({
    base: 0,
    amount: 330,
  })
})
gsap.to('.char', {
  '--weight': 700,
  '--saturation': 80,
  ease: 'sine.inOut',
  duration: 0.5,
  stagger: {
    yoyo: true,
    repeat: -1,
    each: 0.15,
  }
}).time(2)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js
  2. https://unpkg.com/splitting/dist/splitting.min.js