Help with SplitText, Scroll Trigger

[Ar. Li.]

Hello everyone,

   first of all, I want to thank you all for the great insight you provide in this forum so generously. Secondly, please excuse both my English (as I am not a native speaker) as well as my approach to front end (since I am a level below beginner enthusiast).

I was dabbling with TextSplit and ScrollTrigger, having a lot of fun, and trying to replicate elements I saw online. In the first pen below, there seems to be no issue (other than the fact that the section stops being pinned before the entirety of the text has been colored).
Text Color Scroll #1

See the Pen MWMYzez by Aristidis-Lithoxoidis (@Aristidis-Lithoxoidis) on CodePen.

The same exactly with this pen.
Text Color Scroll #2

See the Pen jOjEQLe by Aristidis-Lithoxoidis (@Aristidis-Lithoxoidis) on CodePen.

 

 

When I combine the two
Text Color Scroll Combined

See the Pen JjQoeOY by Aristidis-Lithoxoidis (@Aristidis-Lithoxoidis) on CodePen.

I start having problems. Namely, the second section (the one with a single column) appears -in a most snappy way - before the first section has even disappeared. And then, the second section appears again somehow further down.

I have tried everything I could find online for two days now but nothing. The closest I got was when I changed the "end" attribute of the first script to "end: "bottom +=1000px"", but that doesn't seem ideal.

 

I am sure there is a very easy way of fixing - a problem that most probably I created myself - but couldn't find anything online.

 

Thanks in advance.

See the Pen JjQoeOY by Aristidis-Lithoxoidis (@Aristidis-Lithoxoidis) on CodePen.

[mvaneijgen]

Hi @Ar. Li. welcome to the forum!

 

That are a lot of pens! I just picked one and started to implement some changes I would make and to me this seems to work as expected. I would not use a .set() in a timeline, because that is a zero duration tween, so it is a bit weird to stretch zero over some distance and I have the feeling that is where you're issue is coming form. 

 

I see what you want to do you just want to have the text change color in an instance, that is where eases come in! if you set a ease: "steps(1)" it will take one step from 0 to 1 eg it will change in an instance. Check the ease visualiser https://gsap.com/docs/v3/Eases/CustomEase/#description 

 

Is this what you're looking for? Hope it helps and happy tweening!  

 

See the Pen dyBPQER?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Ar. Li.]

Hello @mvaneijgen. Wow, that was very insightfull. I will give your a way a go, assured that it will work best.

(Yes, there were indeed three pens). 

 

Regarding the first, minor "issue" do you have any idea how to get around it?

Both sections are pinned, while the text changes color. But they stopped being pinned (thus they gradually disappear while scrolling) BEFORE all the chars/words have been colored.

 

To put it simply, I am looking for a way, so after all the text finishes coloring, the user scrolls an additional 50px or 2s before the section becomes unpinned.

[mvaneijgen]

Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set. If you want to get an exact match for 50px you'll need to do some math.

 

Below your pen without ScrollTrigger and GSDevTools installed, so we can see what the animation is doing. The total duration is 4.8, lets make it an even 5 to better explain things and lets say the total distance you scroll is 1000px, so 5 seconds will get mapped to 1000px. If you want 50px of that to do nothing you'll have to calculate 1000 / 50 = 20 then 5 seconds  / 20 = 0.25, so if you where to add a tween to your timeline that does nothing which you can do like so, tl.add(() => {}, "+=0.25") this add a tween to the timeline that does nothing for 0.25 seconds. This is not be fully correct, but I hope it demonstrates the logic you'll need to figure out to get it to be exactly how you want. 

 

Keep in mind that you also have set scrub: 0.75, so everything will lag behind 0.75 seconds, so all your values are a bit loose and will not be exact, so my advise just add an empty tween to the end of your timeline and play with a number that feels right instead of trying to figure out strict pixel values. Hope it helps and happy tweening! 

 

 

See the Pen bGPNOYP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Cassie]

You can also pin and animate separately! You just have to make sure to define a pinnedContainer

 

See the Pen rNEabdj?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Hope this helps!