Reveal / change text colour on scroll

[Josh Rogers]

 

Hey guys, 

Hopefully someone can help here

 

I'm trying to recreate the effect that Apple have achieved on their 'Pro to the Max' text where as the background scrolls up the text colour is changed. It almost seems as though it's being revealed?

Page can be found below:
https://www.apple.com/uk/macbook-pro-14-and-16/

 

Is there any way I can achieve this with GSAP and Scroll Trigger

 

Thank you in advance

[Cassie]

Sure thing - you can mask text with SVG or even just use cleverly positioned divs with overflow:hidden set on them.

Here's an example to get you off on the right foot!
 

See the Pen rNzXONW?editors=1111 by GreenSock (@GreenSock) on CodePen

[Josh Rogers]

Thanks Cassie I'll check it out

[Xinner]

Hello everyone, I'm having trouble syncing the timing of the text color change with the start of the image as well as the scrolling speed with the image. Could someone point me in the right direction?

 

Demo: 

See the Pen PodzdEp by rockynhatnguyen (@rockynhatnguyen) on CodePen

 

Thank you.

[Rodrigo]

Hi,

 

This seems more related with the easing function than something else. This seems to work like you intend:

gsap.to(".mask", {
  duration: 2,
  scale: 1,
  ease: "none",
  scrollTrigger: {
    trigger: "#demo",
    markers: true,
    start: 0,
    end: "+=100%",
    scrub: true,
    pin: true
  }
});

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[YvonneMH]

Hi all, is it possible to do this without SVG? Similar to the attached. Here's the URL: https://www.titan.com/ 

 

[Rodrigo]

Hi @YvonneMH and welcome to the GreenSock forums!

 

Maybe something like this could serve as a good starting point:

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

 

Hopefully this helps.

Happy Tweening!