Can i auto set height to 'auto' in pinned scrolltrigger?

[Poylar]

Hi.

I try to create sticky sidebar, but i have some hidden content.

If i scroll block and then click 'open' text in sidebar overflow him.

this cuz scrolltrigger set height == height content on init.

how i can fix this?

 

also sidebar stop pinned when hidden text cross end point. how its work?

See the Pen JjZNEBr by poylar (@poylar) on CodePen

[mvaneijgen]

I see what you mean. I don't know a solution for how to recalculate the height of the element, that is been set to fixed with ScrollTrigger, but I would work around that. 

 

I've restructured your code a bit, add some CSS and created an animation for the element in question. I've given the element .hidden-text the same styling as the aside and just animate that from a height of 0, this way it looks like the aside element is growing and this has the same effect as if the height of the aside it self would grow. (You need to tweak the CSS a bit to make it perfectly match your original CSS)

 

See the Pen VwdbMpv?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening! 

[Poylar]

On 11/12/2022 at 5:36 PM, mvaneijgen said:

I see what you mean. I don't know a solution for how to recalculate the height of the element, that is been set to fixed with ScrollTrigger, but I would work around that. 

 

I've restructured your code a bit, add some CSS and created an animation for the element in question. I've given the element .hidden-text the same styling as the aside and just animate that from a height of 0, this way it looks like the aside element is growing and this has the same effect as if the height of the aside it self would grow. (You need to tweak the CSS a bit to make it perfectly match your original CSS)

 

 

 

 

Hope it helps and happy tweening! 

Thanks for the answer, but I think this solution does not really help me.

Any ideas?

[Poylar]

oh ok i just added an extra wrapper