When pin: true change opacity?

[stevensunsunsun 5 Likes (Newbie)]

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!

[akapowl 5,014 Likes (Superhero)]

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

[OSUblake 18,453 Likes (Superhero)]

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

 

[stevensunsunsun 5 Likes (Newbie)]

Thank you both! That works perfect! 😄