@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
html, body {
font-family: "Open Sans", serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-variation-settings: "wdth" 800;
color:#111;
}
section {
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
h1 {
width:32vw;
}
h1 span {
display:block;
font-size:7vw;
position:relative;
margin-bottom:3vw;
padding:0 1vw;
width: fit-content;
--bg:transparent;
}
h1 span:after {
z-index:-1;
border-radius:1vw;
content: "";
width:100%;
height:33%;
left:0;
bottom:0;
position: absolute;
background:var(--bg);
}
const arr1 = ["1bb28c","e86a58","fed45b","9bc7c5"]
const arr2 = [...arr1]
const arr3 = [...arr1]
const words2 = ["DON’T","BE","EVIL"]
const words3 = ["NICE TO","MEET","YOU"]
const spans = document.querySelectorAll('h1 span')
const getHexFrom = (arr) => arr.splice( gsap.utils.random(0 ,arr.length-1, 1), 1)
const tl = gsap.timeline({
defaults:{ ease:'none' },
scrollTrigger:{
trigger:'section',
scrub:0,
pin:'h1',
start:'0 0',
end:'100% 0'
}
})
spans.forEach((span,i)=>{
gsap.set(span,{'--bg':'#'+getHexFrom(arr1)})
tl.add( gsap.to(span, { text:words2[i] }), i)
tl.add( gsap.to(span, { '--bg':'#'+getHexFrom(arr2), duration:0.15 }), i)
tl.add( gsap.to(span, { text:words3[i] }), i+3)
tl.add( gsap.to(span, { '--bg':'#'+getHexFrom(arr3), duration:0.15 }), i+3)
})
