Jump to content
Search Community

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

kaipeng test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...
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
image.png.48075f0458a92f21790e2a6923b379e1.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

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
}

 

  • Like 4
Link to comment
Share on other sites

  • 6 months later...

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 :D

 

Jack

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...