Auto Adjust element and pin height

[Sajidul Islam]

Hi,

 

I'm having some issues when I tried to hide an element with height initially and on scroll add a class to make the height auto. The problem is, when I add the class and use the auto height CSS, it's not adjusting the pin height. If I resize the browser a bit, it works. Because of that, my next element's are sometimes  triggering before reaching the top or starting the scrollTrigger.

 

In summary, I have 2 problem-

 

1. Auto adjust pin height while change the element height.

2. All element should start 100px before reaching the top. I think this issue will fix if we can fix the first issue.

 

 

Ant help would be appreciated,

 

Many Thanks,

Sajidul

 

 

See the Pen WNmxewK by sajidulislam0 (@sajidulislam0) on CodePen

[mvaneijgen]

You have to call ScrollTrigger.refresh(); every time something changes, so that ScrollTrigger can calculate the new positions things are in now. I've disabled the scrub: 1, because this ScrollTrigger has no animation so, this will do nothing. Also take a look at your ScrollTrigger markers you can see your "scroller-end" label is at the bottom of the page, meaning that all your scroll triggers are already done when the page has loaded, I've changed the end marker to be at the top of the viewport instead of the bottom. Hope it helps and happy tweening! 

 

See the Pen BabzBMG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Sajidul Islam]

This is exactly what I wanted, Thanks a lot.

[Sajidul Islam]

Hi @mvaneijgen,

 

Sorry to bother you again.

 

Actually I tried to apply your above solutions on my live code and unfortunately, the issue is remains same, Maybe it's because I didn't apply it properly. It's still opening before reach at the top. When the Heading 2 is active and you start scrolling Heading 3 is active(before reaching the top).

 

Another issue is, When I used ScrolTrigger refresh, It's stuck at the pinned element and looks like browser is infinite loading.

 

In this link I tried to replicate my issue, Could you please help and let me know How I can fix this?

See the Pen poYEoBE by sajidulislam0 (@sajidulislam0) on CodePen

[mvaneijgen]

10 minutes ago, Sajidul Islam said:

Another issue is, When I used ScrolTrigger refresh, It's stuck at the pinned element and looks like browser is infinite loading.

enabling ScrollTrigger.refresh() seems to work perfectly to me, what are you seeing? 

 

See the Pen XWGjJKZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[Sajidul Islam]

Hi @mvaneijgen

 

I've find out the scroll issue is happening only when I use scrollSmoother. I've updated my pen with scrollSmoother. Please try to scroll back and forth and you will see when you try to reverse scroll, it stacks on the Heading 4.

 

 I Can share a video recording if you're unable to reproduce the issue.

[GreenSock]

I don't have much time to dig into this now, but...

1. You didn't properly set up your ScrollSmoother with the wrapper and content <div> elements, as the docs suggest. 
2. You've got a bunch of CSS transitions applied to things that drag out the changes, thus when you call ScrollTrigger.refresh() that happens before all those transitions finished, thus the measurements could be off. 
3. You're totally changing the height of the page/content which would cause the scrollbar to jump. Seems like an odd thing to do. I'd probably try to make the page height consistent if possible. 

Here's a fork that has the CSS transitions removed and has the proper wrapper <div>s for the ScrollSmoother:

See the Pen ZEPpvJX by GreenSock (@GreenSock) on CodePen

[Sajidul Islam]

Hi @GreenSock,

 

Yes it works.

 

But the problem is, Since I can't use CSS transition I must have to use it within GSAP. In this case, How can I apply the timeline here which will make the triggered element's inner div's height auto? which is currently handled by CSS? And as usual it will reverse the element on reverse scroll.

 

In summary, How can I achieve the same effect with timeline and apply the animations if needed?

[Rodrigo]

Hi,

 

Here is a simple GSAP driven accordion:

See the Pen KKEgJex by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

The key would be to call the ScrollTrigger.refresh() AFTER all the transitions are done. So if you really want to use CSS transitions, I suppose you could - you just need to delay the refresh() until they're done.