Jump to content
Search Community

Scrolltrigger.refresh() moves my ScrollSmoother around and breaks when I click on elements that fold open and close (accordion)

rubenmeines test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi there,

 

I am working on a website with a lot of ScrollTrigger that has some side scrolling elements and in combination with Scrollsmoother. At the end of the page I have an accordion component that folds and closes elements and therefor makes my scrollsmoother container's height bigger and smaller on click. To make sure that when I change this height the start position of my upcoming scrolltrigger element I call a ScrollTrigger.refresh(). This sometimes works fine but sometimes it totally breaks the scroll by moving to the top and the scrollsmoother height way bigger, or it moves to another position or moves up and animates back really fast to the position where I was. In general it breaks.

 

I have made a small demo hier on codepen with the scrollsmoother, a side-scrolling element with scrolltrigger and boxes that open and close. If you scroll down to boxes 6, 7, and 8 and click on them slightly fast 1 after another you will see a breaking effect. See video also.

 

I think that something goes wrong when scrolltrigger.refresh and updating the scollsmoother height colides. But I am not sure how I should fix that or what would be a better strategy to implementing those fold open and close elements while making sure my next scrolltrigger elements start position is updated.

 

Does anyone have an idea?

See the Pen yLqdOmO by rubenmeines (@rubenmeines) on CodePen

Link to comment
Share on other sites

  • rubenmeines changed the title to Scrolltrigger.refresh() moves my ScrollSmoother around and breaks when I click on elements that fold open and close (accordion)

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...