Refreshing scrolltrigger points on element resize

[Jamie-Robertson]

Hi all,

im having trouble getting my scrolltriggers to refresh on an inner element resizing, demo attached.

 

What im looking to do is when a card scrolls into view, expand the inner area and display the text and image, then collapse and trigger the next card.

 

im sure this is possible, but proving tricky...

 

any input would be appreciated.

 

Jamie

See the Pen zYpxoKP by ru7hl355 (@ru7hl355) on CodePen

[Cassie]

My gut feeling would be to just have one container trigger and then build this up in a timeline...

 

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

 

But maybe there's a way to do this using refresh()? It just feels quite tricky to me because the heights and triggers are constantly changing.

[Jamie-Robertson]

@Cassie thanks, i have also tried it as 1 timeline and i got to were you did, it may be the way forward but as you said its the constant height changes that need considered and im not sure how best to approach that...

 

the other issue i have is i want to pin the open card for a set time before collapsing again, but as soon as PinSpacing is enabled, i get a big gap between the headings.

[Cassie]

Ok, well that's going to be an issue! A scrubbed animation is tied to the scroll distance which is controlled by the user.

There's no concept of  'a certain amount of time' within a scrubbed animation, just a scrolling distance. The user could be scrolling fast or slow.

If you want to pin the card open for a set time you'll need to rethink this!

[Cassie]

Also, the gap is pinSpacing doing what it does best - adding spacing underneath the pinned element so that you can scroll for a while without the following elements 'catching up' and scrolling under or over the pinned element

 

[Cassie]

I gotta say I'm pretty stumped on how to advise you here. Apologies!

I might have to gracefully back down and see if anyone else has some advice.

[Cassie]

*creeps back in

Maybe something like this?

See the Pen bGaNapx?editors=1111 by GreenSock (@GreenSock) on CodePen

[OSUblake]

Several people have asked about this effect, and my advice is to do something else as this is super complicated. The problem is that collapsing the previous section will move everything up, so what was once in the middle of the viewport will be shifted up. It might be easier if you just expanded everything and forgot about the collapsing part.

 

 

[Jamie-Robertson]

@OSUblake@Cassie thank you both, i suspected performance may suffer from this.