scrollTo with expanding accordion tabs not working with scrollTrigger

[mirohristov]

Hi,

I have the following project: https://old.dreamspace.co/projects/metatailor

It all works well expect when trying clicking Plans & Pricing which uses scrollTo() an offset of scrollTop( el )
I'm adding .expand class on the 5 videos which changes the total window scroll height.

As it's scrolling down the page becomes longer and the scroll never reaches the element.

 

Is there a better way to accomplish this? 

I've looked into this pen below  but it seems overly complex and not exactly what I need.

 

Thank you!

 

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

[ryan_labar]

Without a minimal demo it's tough to tell exactly what's going on in your code, but you'll want to call a ScrollTrigger.refresh(); every time your page size changes/finishes changing.

[mirohristov]

Sure thing. Here's a minimal pen. The overall height of the window expands as you scroll, so the anchor tag `#bottom` can't reach when using `scroll-behavior: smooth;`. I'm already using ScrollTrigger.refresh();

 

See the Pen dywxyby by mirohristov (@mirohristov) on CodePen

[GreenSock]

Ah, there are several problems here...

1. You're using CSS transitions instead of GSAP
2. You've created logic issues with the way things are set up there because when you click on that anchor link, the browser just looks at where that target is NOW (when things are collapsed), but then on your way there, you've got things expanding out which push the entire page taller and the target element further down, so the browser has no idea how to accommodate all that. It just goes to the scroll position that it initially determined that element is sitting at. 
3. scroll-behavior: smooth is inherently problematic for scroll-driven calculations because it completely interferes with changing the scroll position. Just like CSS transitions interfere with normal JS-driven animations because when GSAP sets a property, the browser says "NOPE! I won't do that...I'm gonna take some extra time to apply that..."

So is this possible to work around? Probably, but it's well beyond the scope of help we can provide for free here in the forums (please see the forum guidelines). We do offer paid consulting services if you need those. Just contact us privately if you'd like to explore that. 

 

Also, this won't help in this particular case because you're doing a bunch of custom logic and CSS-driven stuff, but in many cases this helper function can help: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup/