Is this possible with GSAP

[MarcFN]

https://www.polestar.com/at/polestar-1/

 

Please scroll down to "Precision". Now you see the smaller text which changes its color by scrolling. Is this also possible with GSAP?

Thanks for your answers in advance

[Rodrigo]

Hi @MarcFN and welcome to the GreenSock forums!

 

If you inspect that site you'll see that each letter is wrapped in a <span> tag, so basically they are switching each span between opacity 0 and 1 as you scroll up and down.

 

Something like that could be easily done with SplitText and ScrollTrigger:

See the Pen mdKWBmm by GreenSock (@GreenSock) on CodePen

 

Is worth pointing that the SplitText Plugin is a Club GreenSock perk, but you can try it for free and experiment with it on Codepen without any issues.

 

Let us know if you have more questions.

 

Happy Tweening!

[MarcFN]

Thank you for your answer. Too bad I didn't find it myself. Greetings from Lake Constance.

 

Happy Weekend!

[MarcFN]

Thank you very much for your reply,

 

at the first moment it looks quite good. But now in practice it turns out that if I pull the display smaller than 600px the content does not adapt (responsive). 

 

Is there a solution for this?

 

Thanks for your answer in advance,

 

Marc

[GreenSock]

That's mostly a CSS issue. You can use a gsap.context() and a resize event handler to make it re-split things on resize like this:

 

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

 

Does that help?