ScrollSmoother not refresh the page height when accordion is open/closed

[kaipeng]

I used ScrollSmoother in a Drupal site, for some reason when there are accordions inside the page, when open or close the accordion, the page height is not refreshed, which made it either unable to scroll all the way to the end of the footer when the accordion is open, or leave some empty space after the footer when the accordion is closed, any thoughts on solving the issue or refresh the page height when an accordion is open/close?

[GreenSock]

You can simply call ScrollTrigger.refresh() to have the start/end positions recalculated. 

[kaipeng]

2 hours ago, GreenSock said:

You can simply call ScrollTrigger.refresh() to have the start/end positions recalculated. 

Should I use it inside accordion function? I put the ScrollSmoother wrapper and content in the master template file so every page will have the smooth scrolling effect.

[GreenSock]

23 minutes ago, kaipeng said:

Should I use it inside accordion function? I put the ScrollSmoother wrapper and content in the master template file so every page will have the smooth scrolling effect.

I'm not sure how you've structured things and I'm completely unfamiliar with Drupal, but the general idea is to just make sure you call ScrollTrigger.refresh() when you're done resizing the content. 

[etheric]

On 5/18/2022 at 11:55 PM, GreenSock said:

I'm not sure how you've structured things and I'm completely unfamiliar with Drupal, but the general idea is to just make sure you call ScrollTrigger.refresh() when you're done resizing the content. 

Hi!
Same issue here, so it's not about ScrollTriggers issue.

ScrollSmoother calculating the page's height (to transform it later) at the page-load. But if you change height of childs after - the page is getting cutted at the bottom, because it wasn't recalculated.

Is there any method like:
 

smoother.refresh()

Currently smoother is refreshing at window-resize. Mb there is a way to force-trigger that

[iDad5]

As far as my understanding goes, ScrollSmoother is not responsible for size calculations in that way, and I'm guess you should find the solution with the ScrollTrigger, but without an example to look at (better jet a reduced CodePen version) it's impossible to be sure.

[Cassie]

Hi @etheric - Yep! the suggestion further up in this thread is the solution.

You'll need to call ScrollTrigger.refresh() when the content is resized. ScrollSmoother is built on top of ScrollTrigger.
 

[etheric]

Hey @Cassie @iDad5
doing a scrolltrigger.refresh, but body's height (which is initially given from smoother I believe) doesn't update.


Here's the codepen

See the Pen poLWVrE?editors=1111 by gesjaa (@gesjaa) on CodePen.

(refresh code - on line 61)
Reproduce:
1/scroll to the footer. See where's (END)
2/ Then close the accordion on the top
3/ End is not on the bottom anymore.. Same if it was closed -> open

Triggers might be updated, but not the body height which is coming from smoother I guess.

[Cassie]

Heya!

 

So here's a simplified demo.

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

In your case you're calling ScrollTrigger.refresh() immediately, but you're animating the accordian open and closed with CSS - so when you call refresh the sections aren't finished moving and the height isn't in it's final state.

If you use JS you can call an onComplete - or if you want to use CSS you could use a delayed call 

//calls myFunction() after 1 second and passes 2 parameters:
gsap.delayedCall(1, myFunction, ["param1", "param2"]);

function myFunction(param1, param2) {
  //do stuff
}

 

[etheric]

@Cassie aaah omg it was so obvious. Yes, everything's worked! Thank oyu.

[akapowl]

21 hours ago, Cassie said:

[...] if you want to use CSS you could use a delayed call 

Or hook into the transitionend event  

https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event

[Cassie]

Ahhh smarty pants!

[jackkemm]

Hi there, is there any way to hide height jump when the accordion opens/closes?

 

One of our clients has accordions at the bottom of a page and if you're right at the bottom and open/close the accordion, the height resize is very obvious and doesn't look too appealing.

 

I looked at the Codepen above and it is a good example of what happens if you're at the bottom.

 

Thanks in advance

 

Jack

[GreenSock]

Hi @jackkemm. I see what you mean. You could do something like this in your tween: 

onUpdate: () => {
  let max = ScrollTrigger.maxScroll(smoother.wrapper());
  if (max < smoother.scrollTop()) {
    smoother.scrollTop(max - 1); // just to give it a pixel of breathing room and avoid potential vibrating
  }
}

Is that better?: 

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

[GreenSock]

I've improved the upcoming release to automatically do this for you. You can preview it on CodePen/CodeSandbox/locally at https://assets.codepen.io/16327/ScrollSmoother.min.js (you may need to clear your cache)

[jackkemm]

Hi @GreenSock,

 

Thanks for looking at that so quickly!

 

Can confirm that has made it 10 times bettere thank you ?

 

I will drop the temporary fix in for now.

 

How often do you update the packages?

 

Thanks,

Jack

[GreenSock]

17 hours ago, jackkemm said:

How often do you update the packages?

That's not really something I can answer - we are very active in maintaining things, but pushing out releases is a big deal and we try to gather up fixes/improvements and when a batch is ready, we push it out. We're aiming to push the next release out in the next few weeks. I just can't guarantee any date. You can use the workaround for now.