JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<h1>
    Presentations<br/>
    for <span class="color">Data-Driven</span><br/>
    Businesses.
</h1>

SCSS

/* @use 'sass:math'; */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@600&display=swap');

$width: 300px;
$crossWidth: $width * 1.15470053838; //$width / math.cos(30deg);
body{
    background: #351D4B;
    min-width: 800px;
}

h1{
    font-size: 84px;
    font-family: Mulish;
    font-weight: 600;
    margin: 1em;
    color: #EFE8F6;
}

.color{
    background-image: repeating-linear-gradient(60deg, #D24A9B 0px, #DD6AE2 $width/3, #602D90 2/3*$width, #D24A9B $width);
    background-size: $crossWidth 100%;
    background-clip: text;
    color: transparent;
    height: 1000px;
    
    animation-name: move-bg;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

    
@keyframes move-bg {
   from {
       background-position: 0 0;
   }
   to { 
       background-position: $crossWidth 0;
   }
}

.bounce{
    position: relative;
    animation-name: bounce-text;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes bounce-text {
    from{
        top: -.05em;
    }
    to{
        top: .05em;
    }
}

JavaScript

const animateEls = document.querySelectorAll('.color');
for(const el of animateEls) {
	const text = el.innerText;
    el.innerHTML = text
        .split('')
        .map((c, i) => 
        	`<span class="bounce" style="animation-delay: ${i/2-100}s">${c}</span>`
        )
        .join('');
}