scrollTrigger start new item on same line

[Jessiu 0 Likes (Newbie)]

I am getting the sentences to change color, but I want only one sentence changed at one time, but since they are on the same line the start and end is at the same point. I am a newbie to js and gsap. . Can anyone provide assistance?

See the Pen dydaWJz by jessicauresti-the-selector (@jessicauresti-the-selector) on CodePen

[PointC 14,428 Likes (Superhero)]

Hi @Jessiu 

 

Welcome to the forum.

 

Sounds like you're looking for the SplitTextPlugin.

 

That would allow you to split the text into lines and set up a ScrollTrigger for each one. The plugin is a perk for Club GreenSock members, but you can try it on CodePen for free.

 

See the Pen 462fb94d7a45cc5239461a133c8c6211 by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

 

[Jessiu 0 Likes (Newbie)]

That might help but I want the text broken up into sentences not each line. Not sure if that solves what I am looking for? The sentences are on the same line. Thank you.

[PointC 14,428 Likes (Superhero)]

Isn't that what your original demo is doing? Each <li> is triggering a color change. I don't follow your desired outcome. If you want the <li> elements to be on individual lines, you'll need to change your CSS and get rid of the display:inline.

 

ul#hometext li {
/*   display:inline; */
  font-size:80px;
}

 

[Jessiu 0 Likes (Newbie)]

I am trying to replicate the second section here: https://www.apple.com/iphone-13-pro/?afid=p238|sRlDhqox3-dc_mtid_20925d2q39172_pcrid_588006467683_pgrid_126654824109_&cid=wwa-us-kwgo-iphone--slid---Brand-iPhone13ProMax-avail-

[PointC 14,428 Likes (Superhero)]

Okay, now I follow. Yeah - SplitText won't be the answer here.

 

I'd just set it up as one timeline, use the parent container as a trigger and set scrub to true.

 

See the Pen d0c1bbfdfaf738f29d61540e2eef6e19 by PointC (@PointC) on CodePen

 

Happy tweening.

[Jessiu 0 Likes (Newbie)]

wowza that looks good I will be working on that asap!