Immediately change color with gsap.to without color-tones in between

[JoussenKarliczek]

Hi,

 

I have a text-animation that highlights sentences when scrolling down - works fine so far.

 

Now I´m looking for a easy way where the color switches immediately - without color-transforming.

 

I tried different ways with onUpdate for example, but I have no clue how to achieve that with the scrub-Option on.

 

Do you have any tipps or ideas?

 

Thanks in advance.

 

 

See the Pen WNByJvE by joussenkarliczek (@joussenkarliczek) on CodePen

[Carl]

Thanks for the demo.

 

If you don't want your animations to have any animation you can set duration:0 or use a set()

 

Once your animations don't have any duration it is important to space them apart in the timeline by using a position parameter.

 

I'm using index * 0.5 in your loop.

 

Without the position parameter they will all run at the same time.

 

See the Pen JjqZvOj?editors=0110 by snorkltv (@snorkltv) on CodePen

 

Hopefully this helps

[JoussenKarliczek]

Hi Carl,

 

thanks for your fast answer. I made adjustments to the codepen where I only Highlight one sentence and extended it with your input.

 

The Problem now is that the sentence at the top - if you scroll back - won´t change anymore. Any clue how to solve that?

 

 

codepen.io/joussenkarliczek/pen/WNByJvE

I´m not able to post the codepen link.

 

Just saw, that my original codepen got updated. Sorry for the confusion.

 

 

[JoussenKarliczek]

Edited Tuesday at 12:57 PM by JoussenKarliczek
Tried again to include codepen.

[Carl]

glad you were able to implement my suggestion.

 

try changing the duration of the first tween to a very small number like duration:0.001

 

See the Pen MWdXPKN?editors=0010 by snorkltv (@snorkltv) on CodePen

 

having a set or 0-duration tween as the first thing in a timeline can be kind of funky 

[JoussenKarliczek]

Thanks for your help and support!!

 

I´d never came to that idea.