[Scrolltrigger pin "jumps" after expanding collapsible element.]

20 hours ago, Cassie said:

Sounds tricky but the same logic stands.

You'd likely need to call refresh multiple times during the course of that section opening. If you used a GSAP tween to open it instead of a CSS animation (we recommend not mixing the two anyway) you could possibly call scrollTrigger.refresh() in a callback?

 

gsap.to(element, { 
  height: 500,
  onUpdate() { 
    scrollTrigger.refresh()
  } 
});

Not sure whether that would do the job or if it would still jump. Worth a shot? 

Thank you for the suggestion! I will try it!

[Scrolltrigger pin "jumps" after expanding collapsible element.]

1 hour ago, _Greg _ said:

Hi!

you need to refresh ScrollTrigger after css animation was finished. Check ScrollTrigger.refresh()

Also i add markers: true to display result of refresh (just for debug)

Also pin: true is the same like pin: ".pinned-section", by default pin pinning trigger element

 

 

 

 

 

Thank you! It gets much better with the refresh, but if you scroll directly after clicking you still get a jump (I guess the scrolling occurs before the refresh). Is there any way of getting rid of that too or is it something one has to live with?

[Scrolltrigger pin "jumps" after expanding collapsible element.]

Hi,

I'm having a problem with pinned objects below expandable objects. As you can see in the codepen the pinning works before you expand the fold out. If you scroll down after expanding it the pin jumps and behaves weird afterwards. What do I do to be able to pin elements below elements that change the height of the page?

See the Pen ZEaYqKg by proxxximity (@proxxximity) on CodePen

[Hide browser scrollbar when using ScrollTrigger and Locomotive]

Thank you so much! I figured since locomotive sets html and body to overflow: hidden when you activate smooth scroll I wouldn't have to, but setting overflow: hidden in my own css helped. I guess it manages to paint with the scrollbar just before the classes get applied that sets hidden on html and body.

[Hide browser scrollbar when using ScrollTrigger and Locomotive]

I am using ScrollTrigger together with Locomotive for smooth scrolling. I liked the look of the Locomotive scrollbar when using just Locomotive but now, for some reason, ScrollTrigger adds an overflow-y: scroll to the scroll container making a standard browser scroll-bar show at all times and underneath the Locomotive scroll-bar when it is visible. I saw that it's the same in the codepen example shown on the ScrollTrigger.scrollerProxy() documentation page.

Is there any way to get rid of the browser scrollbar in a good way when using ScrollTrigger and Locomotive? I tried setting overflow: hidden !important; on the element in my css but that results in the scrollbar showing very briefly before disappearing (like a flicker).

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen