Multiline text colour effect, guidance

[mattpilott]

Hello,

 

I'm trying to work out an approach to animate a paragraph of text line by line, with a colour wipe effect. I can't find anything similar on codepen or on the forum, i've attached a screenshot of the design to give an idea of what i'm trying to do.

 

How should I approach this? My linked codepen is kinda close but not as it shouldn't fade the colour change, instead it should be a wipe

 

Thanks!

See the Pen ExrPPKQ by mattpilott (@mattpilott) on CodePen

[mattpilott]

I got closer but performance isnt great especially in scrolltrigger

 

See the Pen YzBwwEb by mattpilott (@mattpilott) on CodePen

[GreenSock]

I think browsers just have a tough time with the background-image gradients. Totally unrelated to GSAP - it's a graphics rendering thing that's expensive. Why not just animate the color? It looks almost the same and is cheaper: 

See the Pen WNPrwwX?editors=0110 by GreenSock (@GreenSock) on CodePen

[GreenSock]

Sorry, I missed your earlier message (serves me right for chiming in when I don't have much time and only skim). Opacity is even cheaper to animate than the color, so your original is even better.

 

[mattpilott]

Yes i think i may just animate the colour, cant think of a sensible approach to the wipe effect thats responsive