mos Posted March 21 Share Posted March 21 Hi, I created a ScrollTrigger for each section of my page where I split words and text so that the color of the characters changes during the scroll. So far so good, but I would like the data-attribute that I generate for example for the word "consequat." [data-word='consequat.'] activates as soon as I intercept the word. Currently the background color is only added after all text has been colored. Any help? See the Pen wvZJNmy by qurtopianodesign (@qurtopianodesign) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted March 21 Solution Share Posted March 21 Hi there! Almost there, you just need to check within the loop if the word has the data attribute that you're after, if so you can add a different tween to the timeline. See the Pen XWQMQdz?editors=0011 by GreenSock (@GreenSock) on CodePen Hope this helps! 2 Link to comment Share on other sites More sharing options...
mos Posted March 21 Author Share Posted March 21 Thanks so much Cassie! I made a small change to the script so that it can intercept the data-attribute and an array to insert multiple words at once. See the Pen VwNpNyN?editors=0011 by qurtopianodesign (@qurtopianodesign) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now