Jump to content
Search Community

Help with the implementation of the effect

vadbiz test
Moderator Tag

Recommended Posts

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.
×
×
  • Create New...