Scroll-controlled accordion with ScrollTrigger

[Kari98]

Hi! 

 

So right now I have the scrolling effect working as it should, It's leaving a huge blank space after it finishes, how can i stop this from happening?

 

 

See the Pen rNZNZqp by karitorrese (@karitorrese) on CodePen

[elegantseagulls]

The problem is you are animating an element's height, and that's changing the document's height, which makes it really challenging for ScrollTrigger to figure out pinning and unpinning, even with pinSpacing: false turned on. For this, I'd suggest maybe sliding/overlapping the next accordion over the top of the previous one and pinning it to the bottom of the previous' title. This will be far more performant.

 

Something like this, with enough offset at the top to read titles (you'll also need to make sure you add an end element to each section stays pinned):

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

If you must animate the height, running a ScrollTrigger.refresh() onUpdate (and pinSpacing: false) may fix the issue, but I'd be very concerned about performance for this.

[GreenSock]

9 hours ago, elegantseagulls said:

If you must animate the height, running a ScrollTrigger.refresh() onUpdate (and pinSpacing: false) may fix the issue, but I'd be very concerned about performance for this.

Yeah, I definitely wouldn't do a refresh() on every onUpdate (too expensive/wasteful). 

 

That space has to do with pinning which requires ScrollTrigger to figure out the height of the pinned element and apply it in certain ways when toggling pinning, but your demo is messing with the height in the animation itself, so it throws everything off. In your particular case, it might work to set pinSpacing to false and then inside an onRefresh(), set the pin spacer and the trigger element's overflow to "hidden": 

See the Pen NWLPYmJ?editors=0010 by GreenSock (@GreenSock) on CodePen