CLIPPED TEXT FILL BACKGROUND SCROLLTRIGGER

[Dennyno]

Hi guys,
this time I'm having an issue while trying to change text background on scrolling.
The background is clipped, so seems like "filling" the text on scrolling.

Desired result: https://www.aquest.it/it/about - in this case they're using a trick with the :before element and data-text... but even if my demo works bad, I guess it's possible to achieve the same with GSAP and avoiding to add other pseudoselectors to dom.

I guess the best is to make this with observer, because, instead of the codepen example, h2's won't always be inside containers with same class.

What do you thing? Any help?

Will it be lighter to make it the way they did? (Even in that way they may need intersection observer to toggle classes and start animation)

Tx
 

See the Pen LYzPRYg by DedaloD (@DedaloD) on CodePen.

[OSUblake]

4 hours ago, Dennyno said:

I guess the best is to make this with observer

 

ScrollTrigger can do everything the intersection observer can do and more, including toggling classes.

 

If you want to animate a pseudo element with GSAP, just use CSS variables.

 

.text-reveal {
  --reveal-width: 0%;
  ...
}

.text-reveal:before {
  width: var(--reveal-width);
  ...
}

 

gsap.to(".text-reveal", {
  "--reveal-width": "100%",
  ...
});

 

[Dennyno]

Hi Blake, thanks.

Yep I thought so, but how to make this independent from the container, as if works with observer?

When, example; h2 is on the center of the viewport, start the transition?

Actually GSAP needs a trigger container to listen.

 

and why on my example the transition works strange?

 

I tried with solid colors and doesn’t start at all.

 

example starting white, fill orange.

 

now I set: start white out from the viewport, fill linear gradient and move to center…

 

Thanks ?

[OSUblake]

4 hours ago, Dennyno said:

Yep I thought so, but how to make this independent from the container, as if works with observer?

When, example; h2 is on the center of the viewport, start the transition?

Actually GSAP needs a trigger container to listen.

 

Not really sure what you mean. How is an intersection observer target different from a ScrollTrigger trigger? You don't need a container for ScrollTrigger, just the element you are targeting.

 

4 hours ago, Dennyno said:

and why on my example the transition works strange?

 

Did you try with the CSS variables? I would try to make the animation without ScrollTrigger first. Once you have it looking like you want, then add in ScrollTrigger.

 

[Dennyno]

15 hours ago, OSUblake said:

 

Not really sure what you mean. How is an intersection observer target different from a ScrollTrigger trigger? You don't need a container for ScrollTrigger, just the element you are targeting.

 

 

Did you try with the CSS variables? I would try to make the animation without ScrollTrigger first. Once you have it looking like you want, then add in ScrollTrigger.

 

My fault.
Always used a container as trigger.

Gonna try the way you said, thanks .