Animate opacity of sticky element according with parent height

[EdwinSana]

Hello. Please, I would like your help with this question:

 

I have a series of boxes ("container"), inside of them there is a sticky element ("element_sticky") and in some of them a big block of text ("element_nosticky") that should move normally, i.e. not sticky.

 

In an answer I received in another topic, I got the solution to make said sticky element sticky based on its parent's height. Thanks for that. But I would also like its opacity to be animated too, (from opacity 0.2 to opacity 1.0) based on the height of its parent, in a same way that it's sticky behavior. I mean: when change it's behavior from sticky to non-sticky change it's opacity from 0.2 to 1.0. 

 

In that topic's solution, "ScrollTrigger.create" is used to accomplish that goal: the sticky element would be sticky based on the height of its parent. But now I don't know how to animate the opacity with this. I tried in a very poorly way with "onEnter: {opacity: 1.0}),", but it doesn't work and now I'm stuck.

 

I would like to add in my question that the reason I want the opacity of "element_sticky" to animate according to the height of its parent is because in the actual project I am developing "element_sticky" is a full screen background image and to achieve a smooth transition between the opacity of the sitcky elements I am using "end: "+=50000". In the project I have a lot of "element_sticky" elements and I see that after I have gone through a good part of the page navigation, the opacity animation start to have a lag with like a wierd error. I have identified that it is due to having these values as high as " end: "+=50000" in too many elements. Sorry for this too long and confusing explanation, but I wanted to put in context the reason for my question, since that it is not possible for me to put my real project in a codepen and I know that this forum it's not to solve questions from a real complex project.

 

The following is the codepen with my poor attempt.

 

Thank you very much for your help.

See the Pen ExRZNXP by EdwinSanabria (@EdwinSanabria) on CodePen

[Trapti]

Hi, 
Is this what you want to achieve 

See the Pen xxzgqde by tripti1410 (@tripti1410) on CodePen

 

 

onEnter syntax is wrong, it needs function. 
 

I added this opacity on scrub if you want you can remove also. If you want to add opacity on onEnter it will look something like this. Also there was a syntax error on your codepen  I corrected that. 

onEnter: () => gsap.from(sticky, {opacity: 0.2, duration: 1})

 

[EdwinSana]

Hi @Trapti!

 

That's the solution I was looking for. Thank you very much for your help!