vadbiz Posted October 13, 2022 Share Posted October 13, 2022 Good afternoon! Tell me where to start to make such an effect with text and a gradient as at the very beginning of the page? https://www.apple.com/iphone-14-pro/ Link to comment Share on other sites More sharing options...
Carl Posted October 13, 2022 Share Posted October 13, 2022 Start with the gradient animating through the text See the Pen QWrYvJV by snorkltv (@snorkltv) on CodePen Next Steps Add ScrollTrigger to the animation add scrub:true modify page so that you have room to pin the text and have enough room to scroll 3 Link to comment Share on other sites More sharing options...
elegantseagulls Posted October 13, 2022 Share Posted October 13, 2022 The Apple site is using a mix-blend-mode darken on an image (in this case a funky gradient), which is being animated over the text (white text on black background). 3 Link to comment Share on other sites More sharing options...
Carl Posted October 13, 2022 Share Posted October 13, 2022 nice catch @elegantseagulls I didn't look that closely originally. attached iphone-blend-mode.mp4 is a video that sheds more light on the trick. I removed overflow:hidden from the element in dev tools and set the background to something other than black. 2 Link to comment Share on other sites More sharing options...
vadbiz Posted October 13, 2022 Author Share Posted October 13, 2022 52 minutes ago, elegantseagulls said: The Apple site is using a mix-blend-mode darken on an image (in this case a funky gradient), which is being animated over the text (white text on black background). How to implement it on GSAP? Link to comment Share on other sites More sharing options...
elegantseagulls Posted October 13, 2022 Share Posted October 13, 2022 36 minutes ago, vadbiz said: How to implement it on GSAP? You'll want to set your text as position: sticky, or use ScrollTrigger's pin: true, and then animate the gradient image over the text in the y direction. We (the modorators) don't have the time to custom code exact solutions for the questions on these forms. This is a pretty straight forward animation... If you look at https://greensock.com/docs/v3/Plugins/ScrollTrigger the docs, the Scrubbing and Pinning examples will set you in the right direction. Just apply those to the descriptions above here. 3 Link to comment Share on other sites More sharing options...
vadbiz Posted October 17, 2022 Author Share Posted October 17, 2022 On 10/13/2022 at 6:26 PM, elegantseagulls said: You'll want to set your text as position: sticky, or use ScrollTrigger's pin: true, and then animate the gradient image over the text in the y direction. We (the modorators) don't have the time to custom code exact solutions for the questions on these forms. This is a pretty straight forward animation... If you look at https://greensock.com/docs/v3/Plugins/ScrollTrigger the docs, the Scrubbing and Pinning examples will set you in the right direction. Just apply those to the descriptions above here. Thank you! I still don't understand how do I link gsap.to and scrolltrigger?) Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 17, 2022 Share Posted October 17, 2022 @vadbiz It's the first code block on the documentation page. https://greensock.com/docs/v3/Plugins/ScrollTrigger There is also a video on there that explains everything and how to use it in great detail gsap.to(".box", { scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once) x: 500 }); I like the "Advanced example" right underneath that better, because you have a lot more options with it. 4 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