ScrollTrigger underneath expanded accordion not recalculating

[daaanpace]

Hello

 

I'm having an issue with scroll trigger when there are expandable elements on the page such as an accordion or a dropdown.

 

If I scroll the page without expanding an accordion at the top of the page above the scroll trigger element, it scrolls as expected.

 

If I expand an accordion then scroll to the scroll trigger element there's a bit of jump as if it's snapping to the element - not smooth at all.

 

Created a really rough codepen of the issue.

 

I'm pretty sure it's because the scroll trigger element can't calculate the new height of the page when the accordion is expanded but I can't figure out how to fix it.

 

I've googled around and searched the forums trying a few things but can't get anything to work. I'm probably missing something really obvious.

 

Any help would be appreciated.

 

Thanks

See the Pen JjyMBWG by daaanpace (@daaanpace) on CodePen

[akapowl]

Hello @daaanpace

 

You will need to call a refresh after the expansion of the accordion - what you could do is add an eventListener to each of the summary elements with a slightly delayedCall for the refresh (to make sure the height of the content has changed when the refresh is called).

 

Something like this maybe

 

document.querySelectorAll('summary').forEach( function(summary) {  
  summary.addEventListener('click', function() {
    gsap.delayedCall(0.001, function() {
      ScrollTrigger.refresh()
      console.log('click')
    })
  }) 
})

 

See the Pen 4c46189a19efc41e55ffa5b252a73926 by akapowl (@akapowl) on CodePen

[daaanpace]

Thanks works a treat!