Animating text with a gradient on scroll

[Josh Rogers]

Hey guys, 

 

How would I go about creating some text that has a CSS gradient background which changes on scroll?

 

Apple have a really good example here:

https://www.apple.com/uk/iphone-12-pro/

 

There is a section which reads "Less bezel, more screen" and the text has a light to black gradient which changes on scroll

 

Any help is much appreciated

[iDad5]

I see several approaches. You could simply move or scale a transparent to black gradient over the white text. Depending on the use case you might have to work wit a mask. All this of course  handled with scroll trigger. In the case of the apple site the fact tat ist all black in black makes it easier than when you would have backgrounds you don't want to hide.  

[Josh Rogers]

Hey there,

 

Thanks for your reply

 

I like the sound of the the first option that you mentioned with scaling or moving a transparent to black gradient over the text

 

I don't suppose you would be able to do a codePen showcasing this in action? I am new to scrollTrigger and gsap so still learning all it's tips and tricks 

[Josh Rogers]

Sorry also just to add I am working with white text on a black background as well

[akapowl]

 

Hey @Josh Rogers - welcome to the forums.

 

Pretty much the same has been asked just recently in this thread below.

 

Although there is no explicit example with ScrollTrigger intergrated, if you follow along that thread, you should be stearing into the right direction.

 

The example for the animation itself uses a gradient as a mask.

 

 

Hope this helps.

 

[Josh Rogers]

Thanks for the reply - I will check out that thread now

[iDad5]

@Josh Rogers I might give the CodePen a spin, as I haven't real worked with scroll trigger but need to do so in an other project.
I have recently done a 'one line scroller' with a mask and came across several tricky problems. One of which was to determine the actual text-width, as I was working with web-fonts and I had to check for the event when the font was applied. Do you need to consider that?  

[iDad5]

Here is my first take. Probably not very elegant, but it might help a little.

 

See the Pen oNYVQGL by mdrei (@mdrei) on CodePen

[Josh Rogers]

Thanks for doing that awesome example

 

Just wondering whether there is an easy way to change a gradient on text? For example the text could start as a black to white gradient and then on scroll that gradient changes to a red to dark red?

[iDad5]

In that case it might be best to use background-clip: text an animate the actual background gradient. 
shouldn’t be to hard, just a little more ‘abstract’ than sliding a gradient over white text.

I’m not sure about browser support, but I guess by now it should be quite ok. 

[Josh Rogers]

Yeah I had thought the background clip would be the best idea but I couldn't find an example of how to animate the gradient on that piece of text specifically

 

Is there a way to change the gradient inside of the gsap.to() object ?

[iDad5]

 

[Carl]

this thread got me tinkering with background-clip:text (as iDad5 suggested). 

I'm going to use this for an upcoming lesson for my students in my Creative Coding Club.

 

however, if you want a sneak peek at a not-so-ready-for-production version here you go:

 

See the Pen 6720103d55791e83f754ce7a1a7dc008 by snorkltv (@snorkltv) on CodePen

 

if you're on mobile, try landscape mode.

 

the short version of how it works is that the text has a gradient that goes from black to "white" to black at a 45deg angle.

I use a gsap tween to move those colors over to the right. Each tween has a ScrollTrigger attached.

 

I'll probably find a way to turn those 2 sentences into a 15-20 min video.

[jayesh24]

I want an animation like iPhone 14 Pro website in which second section have this type of animation in which text color changes  but not able to achieve it . If anyone canhelp will be very helpfull

[elegantseagulls]

The apple site is adding a position: sticky; to the text, then achieving the gradient effect by animating a mix-blend-mode: darken; colored gradient vertically (in that same sticky container). You could do the same thing with ScrollTrigger and pinning, pretty easily.

Similar to this, but animating a gradient instead of parts of a shoe:

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

[Rodrigo]

Hi @jayesh24 and welcome to the GreenSock forums!

 

I took some time to check the iphone site and they are using mix blend mode with a gradient image.

 

I created a simple example to show how it works:

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

 

Well... @elegantseagulls beat me to it 🤷‍♂️

 

Happy Tweening!

[elegantseagulls]

Just now, Rodrigo said:

I created a simple example to show how it works

You went above and beyond, though!