Jump to content
Search Community

Auto word gradients - splitText

fripi test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

@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')
...

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...