<div class="quote">RANDOM COLORS</div>
body { background: #1d1d1d; }
.quote {
font-family: helvetica;
font-weight: 300;
font-size: 15vw;
text-transform: uppercase;
}
const tl = gsap.timeline({repeat:-1}),
split = new SplitText(".quote", { type: "chars, words" }),
chars = split.chars;
tl.set(chars, { color: "random([#6fb936, #f38630, #989898, pink])" }, 2);
tl.from(chars, {
opacity: 0,
duration: .1,
stagger: .1,
});
tl.to(chars, {
duration: .5,
opacity: 0,
stagger: 0.05,
ease: "power4.inOut",
});
This Pen doesn't use any external CSS resources.