How to maintain page position with an expanding horizontal accordion on horizontally scrolling page.

[v5StD+]

I've got a horizontal accordion on a horizontally scrolling page.

 

When the accordion changes size, calling ScrollTrigger.refresh() updates the sizes, but causes the scroll position to jump as the page is now longer.

 

I've tried a work-around that stores the scroll position before the refresh and then applies it after refresh. This maintains the correct page position, but you can see the page slide into position after refresh (due to scrub = 1) 

 

What's the best way to handle this?

I want the accordion to expand/contract without the page visually jumping.

See the Pen mybzvKM by reduced-test-case (@reduced-test-case) on CodePen.

[Rodrigo]

Hi,

 

This is mostly related to the invalidateOnRefresh config option, which of course is needed and useful because of the updated width of the element being moved horizontally. Maybe this demo can come in handy:

See the Pen jOpWwEg by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Rodrigo]

Hi,

 

Another option is this but you loose the smooth scrub though:

See the Pen LEPXPYP by GreenSock (@GreenSock) on CodePen.

[v5StD+]

Hi Rodrigo,

Thanks so much for your replies here, and all your other replies across the forum. They have been very helpful when I've been using GSAP.

Unfortunately, in this scenario I need to have scrub animation.

 

Even when scrub is just set to true, when the DOM is heavier you see a very obvious flicker as the DOM repaints after ScrollTrigger.refresh() before jumping immediately to the new value.

Was hoping I was missing something obvious to solve this!

[Rodrigo]

Yeah, then I suggest you the solution in place in the first demo I posted, that should be the way to tackle this.

[v5StD+]

That suffers from the same problem when smooth scrub is enabled.

 

See the Pen RNbqgVM?editors=1010 by reduced-test-case (@reduced-test-case) on CodePen.

 

Thanks again for your help.

[Rodrigo]

Yeah, I'm afraid that this might not be a simple solution because of all the factors (scrub, increasing the width of a pinned element, invalidate on refresh, etc). Right at the top of my head I can't really think of a simple solution for this and unfortunately we don't have the time resources to create custom demos or solve complex logic issues for our users, is beyond the scope of what we do in these free forums. You can post in the Jobs & Freelancers in order to get help there.