Scrolltrigger pin "jumps" after expanding collapsible element.

[Fredrik Vestin]

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

[_Greg _]

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

 

See the Pen zYPxerO?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen

 

 

[Fredrik Vestin]

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?

[Cassie]

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? 

[Fredrik Vestin]

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!