Jump to content
Search Community

ScrollTrigger change opacity based on scroll

dogzzz test
Moderator Tag

Recommended Posts

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!

  • Like 2
Link to comment
Share on other sites

 

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

 

  • Like 3
Link to comment
Share on other sites

  • 5 months later...

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 ❤️

Link to comment
Share on other sites

 

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. 

 

  • Like 3
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...