EdwinSana

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

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.

Hi Jack. That is the solution I was looking for. Thanks for the advices, I'll look for more information about "refreshPriority" then. Thank you for your quick and detailed response!

Hello. Please, I would like your help with this question: 1. I have a series of boxes called "container" which have inside them a sticky element called "element_sticky" that is sticky according to the height of its parent, which is "container". There is also an element that is not sticky, that is, it should scroll vertically normally, called "element_nosticky". 2. I have a box called "containerGal" which has horizontal scrolling. I have the following problem: I have a gallery that scrolls horizontally and after it comes another "container" box with a sticky element inside it. When I'm scrolling horizontally through the gallery the sticky element of the next "container" box overlaps the horizontal gallery. It is as if the sticky action was performed before the gallery finished its horizontal scrolling completely and then continued with the vertical scrolling. Thanks for the help!

Hi! This answer, along with the one @Cassie offered, is that I'm looking for. Thank you very much again to both of you for the help.

... Or anyone who can please offer any hints or help regarding this question would be greatly appreciated. Thanks.

Hi @Cassie Thank you very much again for the solution, which has partially worked for me, but sorry, I have a problem and would like to ask for your help again please: The purpose of "element_sticky" is to be an element that text of different lengths, both short titles as well as very long blocks of text, can be regularly scrolled over. This implies that the sticky effect must be able to adjust to the different height values that the container has, either a fixed value such as "height: 350vh;", or it must be able to make the sticky effect if what is inside "container" it's a very long text. In summary, the ideal is that the sticky effect is adjusted strictly to the height of its parent "container" and not to that of its sibling, which in this case is "element_nosticky". I leave the following codepen to better illustrate my point, in which I have left "element_sticky" with position:absolute so that it is located under "element_nosticky" https://codepen.io/EdwinSanabria/pen/xxzwPVw Thanks again for all your help.

Hi @Cassie Perfect, that's the solution that I'm looking for. Thank you!

Hello. Please, I would like your help with a simple question: I have a series of boxes ("container"), inside of them there is a sticky element ("element_sticky") and a big block of text ("element_nosticky") which should move normally, I mean not sticky. I'm stuck trying to make "element_sticky" sticky relative to its parent's height. It didn't work and I had to use an oversize value at the end: end: "top +=60000", this so that "element_sticky" would at least not break its sticky behavior before it overtake its parent ("container"). What I am looking for? That when the bottom of "element_sticky" touches the bottom of its parent ("container"), it starts going up with it, i.e. it ends its behavior as sticky. Thanks for the help!

Hi @mvaneijgen ! Thank you very much for your help! Yes! Sorry, I meant scrub: true in that part of my question. And your solution is that what I was looking for. I will review the documentation in detail for other related questions that may arise. Again, thank you very much for your help!

I'm stuck with what I think is something very very simple from Scrolltrigger but I haven't been able to figure it out and would like your help please. I have an element and I want two animations for it: 1. Animate the opacity of ".element" from opacity: 0.2 to opacity: 1 but with scrub: false, I mean, its opacity is not progressively animated as scrolling is made, but when scroller-start meet with start, the animation it's completely executes. 2. Animate the position of ".element" from x: 0 to x: 300 but with scrub false so that its movement is progressive according to the scroll. I would like the second animation not to happen immediately after finishing the first one, but to be able to apply a "delay" of one or two seconds to it. I have not succeeded and when I have tried to change the values of start and end it does not work correctly (that is why I have commented on them). Thanks for the help!