ScrollTrigger change opacity based on scroll

[dogzzz 10 Likes (Newbie)]

Hi there,

 

How can I make it so that as you scroll down the opacity of the image goes to 0 (rather than it being based on time) 

 

For an example of desired effect see the top hero of https://www.apple.com/uk/ipad-air/

 

Thank you very much

See the Pen MWGzEwx by zrrrrr (@zrrrrr) on CodePen

[Rodrigo 5,387 Likes (Superhero)]

Hi,

 

You have some issues in your ScrollTrigger configuration. When a ScrollTrigger is added to a GSAP instance, you have to create a specific configuration object for it. Also in your HTML you had the ID for the trigger element with the number sign in it

<div id="#trigger"> <!-- HERE -->
  <img id="triggered-element" src="https://www.apple.com/v/ipad-air/r/images/overview/hero/main_ipad__d991v5y9hgom_medium_2x.png" alt="">
</div>

Normally you don't add that there, only in the text text selector in GSAP.

 

Here is a basic example showing how to create the animation:

See the Pen QWrJazm by GreenSock (@GreenSock) on CodePen

 

Finally take some time to go through ScrollTrigger's documentation and also you can take @Carl's excellent getting started course that is completely free:

https://www.creativecodingclub.com/courses/scrolltrigger-express?ref=44f484

 

Let us know if you have any other questions.

 

Happy Tweening!

[Carl 11,161 Likes (Superhero)]

Thanks, for the mention @Rodrigo the ScrollTrigger course isn't free. Just the GSAP 3 Express beginners course. However, I'd like to think the complete course bundle offers a ton of value at my re-introductory pricing of $2.95/month

[akapowl 5,215 Likes (Superhero)]

 

5 hours ago, dogzzz said:

How can I make it so that as you scroll down the opacity of the image goes to 0 (rather than it being based on time) 

 

scrub is what you are looking for (instead of toggleActions) @dogzzz.

 

scrub

Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

 

 

...and if you also want to keep it in center as on the apple website, you'll also want to take a look at pin

 

pin

Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element. Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element. Note: if you are pinning something that is nested inside another element that also gets pinned, make sure you define a pinnedContainer so that ScrollTrigger knows to offset the start/end positions accordingly.

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

See the Pen mdLQKem by akapowl (@akapowl) on CodePen

 

[dogzzz 10 Likes (Newbie)]

Thank you very much!

[Lucacv 2 Likes (Newbie)]

Hi all, 

 

Sorry if I am replying to this old thread, but what if I want the phone to still have opacity: 1 even after the pin effect is done? 

Considering also reversing the animation, I mean:

• If I scroll up the animation will reverse so opacity from 1 to 0
• If I scroll down the animation will play normally so opacity from 0 to 1 as the example above.

Thanks ❤️

[akapowl 5,215 Likes (Superhero)]

 

Hey there, Luca.

 

So you want it to behave the exact other way around? Then you'd need to set it up the other way around.

 

E.g. set the image to opacity 0 initially, either in CSS or in JS before the ScrollTrigger is created; and then tween it to opacity 1.

 

If you are having problems achieving that, please post a minimal demo of what you have tried, so we can help you from there. 

 

[Lucacv 2 Likes (Newbie)]

Forgot to add opacity to 0 as initial state. 

 

Sorry 😒

 

Thank for your quick help 👍