Jump to content
GreenSock

vadbiz

Help with the implementation of the effect

Recommended Posts

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

 

  • Like 3
Link to comment
Share on other sites

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). 

  • Like 3
Link to comment
Share on other sites

nice catch @elegantseagulls I didn't look that closely originally.

 

attached

 

 

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.

 

 

  • Like 2
Link to comment
Share on other sites

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

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. 

  • Like 3
Link to comment
Share on other sites

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

@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. 

 

  • Like 4
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.
×