Jump to content
GreenSock

Dennyno

CLIPPED TEXT FILL BACKGROUND SCROLLTRIGGER

Go to solution Solved by Dennyno,

Recommended Posts

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

Link to comment
Share on other sites

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%",
  ...
});

 

  • Like 2
Link to comment
Share on other sites

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 😊

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • Solution
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 . :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×