Auto word gradients - splitText

[fripi 30 Likes (Newbie)]

Hi everyone,

 

I'm here again with something that can maybe be done just in js but as I use gsap for my banner animation I thought it could also help me with some "design" problem.

 

I have very strict guidelines to follow : for every sentence in my banner,  every 2 words the color must change (yellow > orange > red > orange > yellow > orange...). So I started by just manually put some spans with styles (second text block in my pen) but that makes the code kind of difficult to read and also it messes up the breaklines.

 

As I already use splittext to make it appear line by line I was thinking that maybe i could set a color by breaking the sentences by words, but i'm kind of stuck there in the logic, has anyone an idea ?

 

thank you 

See the Pen jOYdRXr by fripi (@fripi) on CodePen

[Cassie 3,985 Likes (Superhero)]

Great use case for GSAP's wrap util!

 

See the Pen BaJMeOW by GreenSock (@GreenSock) on CodePen

[fripi 30 Likes (Newbie)]

thank you @Cassie that's a discovery for me

now i can just update that array to create the needed gradient woooowww

[fripi 30 Likes (Newbie)]

@Cassie is there a way to start from array[0] for each sentence, or must I create a word array for each like that

 

let words1 = gsap.utils.toArray('#txt1 .w')
let words2 = gsap.utils.toArray('#txt2 .w')
let words3 = gsap.utils.toArray('#txt3 .w')
let words4 = gsap.utils.toArray('#txt4 .w')
...

 

[Cassie 3,985 Likes (Superhero)]

There's many ways to approach this. You could do it that way yes.

[fripi 30 Likes (Newbie)]

Thanks again, I modified my pen, it works great, I will try later to shorten that code if I understand how