Elia Posted November 21, 2023 Share Posted November 21, 2023 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 Link to comment Share on other sites More sharing options...
Solution Toso Posted November 22, 2023 Solution Share Posted November 22, 2023 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 Link to comment Share on other sites More sharing options...
Elia Posted November 22, 2023 Author Share Posted November 22, 2023 something don't work correctly: See the Pen MWLGwJw by edalbe (@edalbe) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 22, 2023 Share Posted November 22, 2023 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 2 Link to comment Share on other sites More sharing options...
Elia Posted December 12, 2023 Author Share Posted December 12, 2023 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? Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 12, 2023 Share Posted December 12, 2023 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 6 Link to comment Share on other sites More sharing options...
Elia Posted December 13, 2023 Author Share Posted December 13, 2023 thanks, I tried as you advised, but scrolling up continues to be slower than scrolling down. Link to comment Share on other sites More sharing options...
akapowl Posted December 13, 2023 Share Posted December 13, 2023 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/ 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now