SplitText & ScrollTrigger does not include transition for color / opacity

[pbj]

I've got a fun little animation going but stuck in that it does not excute a smooth transition from one color to another. It just abruptly transitions. In the codepen I've split the text by line, and then animation each word within the line(s) with the intention of giving them the appearance of fading each word in after another. 

 

While the general approach is working as expected the words within each respective line will not fade from one color to another (or 0 → 1 opacity, either for that matter). 

 

I've tried to add tailwind transition classes but that seems to break the entire animation all together. 

See the Pen BavOmaQ by pbj (@pbj) on CodePen

[mvaneijgen]

Hi @pbj 

 

Understanding markers can be tricky, but is something you should pay attention to, because it is logical if you think about it. As you can see there are multiple triggers and the start trigger is on the top of the browser and the end trigger below that. 

 

Then when you scroll down you see the markers from your elements coming in, but your start and end trigger are at the same location. ScrollTrigger works as follows: it starts when the start triggers meet each other and end when the end triggers meet each other. 

 

With that knowledge  if you check your pen you can see that the first thing that happens is that the end triggers meet, so they animation is done before it starts! That is why you see the instant jump of the tween completing.

 

I've tweaked your makers of the element so that they end a little bit later.

 

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

 

I've tried translating your start and end markers to English. Try reading them and if that is how you want them to work (I think that is not the case) 

 

// If I translate the folliwing to english
start: `top -=${i * 10}`, // Start when the top of the element hits the top of the browser -10 * index (as you can see your markers are going out side the browser view port)
end: `top +=${100}`, // dEnd when the top of the element hits the top of the browser + 100px 

 

4 hours ago, pbj said:

I've tried to add tailwind transition classes but that seems to break the entire animation all together. 

 Yep don't add CSS transitions to GSAP animations! That is going to result in a bad time!

 

I've also created a fork of your work with a solution how I would go about it. I've add some comments in the code with explanations, please read through them. Hope it helps and happy tweening! 

 

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