Text Clip Mask On Scroll

[Elia]

Hello everyone. I have a doubt. I was following this blog by Olivier Larose where he creates this type of effect with next.js. I was wondering, is there something similar that can be used with the gsap library and create in html, css e js?

Thank you very much, if there is also something here on the forum that i can follow

This is the link:

 

https://blog.olivierlarose.com/demos/text-clip-mask-on-scroll

[Toso]

i think that's what you looking for just add the video src and you're good to go 

 

See the Pen qBgoGPP?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

[Elia]

something don't work correctly: 

See the Pen MWLGwJw by edalbe (@edalbe) on CodePen

[mvaneijgen]

30 minutes ago, Elia said:

something don't work correctly: 

Can you be more descriptive? What exactly is not working? 

 

You're not loading any of the GSAP library's that you are using. If you open the console of your original pen you will see it say "ReferenceError: Can't find variable: gsap", you need the load GSAP before you can use it. In codlin you can do that in the JS settings panel and if you want to use it on your site check out our install helper  https://gsap.com/docs/v3/Installation

 

See the Pen ZEwoGde?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

[Elia]

I have a question. Scrolling down is faster than scrolling up. For example, how can I set a scrub speed of 8 for scroll down and a scrub for scroll up 1?

[mvaneijgen]

I think you're seeing the default ease of power1.out that gets applied to every tween in ScrollTrigger by default, see https://gsap.com/docs/v3/Eases/ and also check out the video our own @Carl dropped just a week ago! 

 

 

Here the same pen with the ease set to none which makes it an even speed through out the whole animation.

 

Hope it helps and happy tweening! 

 

See the Pen abXxXov by mvaneijgen (@mvaneijgen) on CodePen

[Elia]

thanks, I tried as you advised, but scrolling up continues to be slower than scrolling down.

[akapowl]

On 12/12/2023 at 11:47 AM, Elia said:

Scrolling down is faster than scrolling up.

Since ScrollTrigger doesn't change the scroll behaviour of your browser in any way; scrolling up should result in the exact same speed as scrolling down.

If you mean that your scrubbed tween feels slower towards the end, than it feels at the start - which would be more noticeable when scrolling back up because depending on how fast you scroll down you might not even see the full tween until your ST unpins, because you are using a scrub with a value of 1 - using a linear ease might not actually be the way to go, but instead you might want to have a look at the ExpoScaleEase.

While a linear ease would lead to the values of the scale get interpolated linearly over time; for tweening on the scale of something that does not mean that it will visually appear linear in 'speed' to you - although the math is absolutely correct. That is just a 'phenomenon' related to the nature of how scaling works.

Make sure to watch the video on the linked page for a more thorough explanation.

https://gsap.com/docs/v3/Eases/ExpoScaleEase/