Jump to content
GreenSock

stevensunsunsun

When pin: true change opacity?

Go to solution Solved by akapowl,

Recommended Posts

Hi! I'd like to recreate the opacity effect seen here (the attached section of the website)… https://www.apple.com/careers/ca


When the user reaches that section and it pins, a black overlay automatically increases in opacity between the image and text.

When the user leaves that section, the opacity goes back to 0, and then when they return it repeats.

Is that possible with gsap? I'd like to be able to do it without scrub so that it isn't dependant on the user scrolling but just happens and reverse when the section is fully in and fully out of screen.

I can get the pinned section to work but am not sure how to then combine pin: true with an opacity change.

Thanks!

Screenshot 2022-04-01 at 07.13.45.JPG

Link to comment
Share on other sites

  • stevensunsunsun changed the title to When pin: true change opacity?
  • Solution

Hello Steven,

 

If you don't want something to scrub, the best way to control the tween with a ScrollTrigger is toggleActions.

 

You can't have both at the same time (scrub and toggleActions) with one ST though, so for different animation types to be triggered at the same point you might have to create two different ScrollTriggers or alternatively use STs callback system to trigger the time based tween on the scrubbing ScrollTrigger but I would suggest to just create 2 STs

 

From the docs:

 

toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

 

And as always: If this doesn't work for you, a minimal demo of yours will be very much appreciated.

 

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

  • Like 4
Link to comment
Share on other sites

That Apple page just looks like they are toggling a class when the section gets pinned. That class triggers a brightness filter. You could easily do the same using the toggleClass property.

 

Quote
String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following:
  • String - The name of the class to add to the trigger element, like toggleClass: "active"
  • Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements.
Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).

 

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