Change Height and Accordion

[newGsapMember]

Hello,

I have a sticky menu on the left that adjusts based on the height of the content. I’m also using an accordion on the page. However, when an accordion item expands and the content becomes longer, the left sticky menu does not update its position and remains stuck at the top.

How can I fix this issue so the sticky menu recalculates and stays aligned with the content height changes?

See the Pen ogbdLNQ by ozenccam (@ozenccam) on CodePen.

[Rodrigo]

Hi,

 

You're looking to use the refresh method after the accordion animation completes and the reverse is completed:

const tween = gsap.from(accordion_content, {
  height: 0,
  duration: 0.3,
  ease: "power1.inOut",
  reversed: true,
  onComplete: () => st.refresh(),
  onReverseComplete: () => st.refresh(),
});

Also since you have the ScrollTrigger instance stored in a constant you can use the refresh method of the specific ScrollTrigger instance, maybe is not needed to call the global refresh method that refreshes all the ScrollTrigger instances in the page, which can be expensive. 

 

Here is a fork of your demo:

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

 

Hopefully this helps

Happy Tweening!

[newGsapMember]

Thank you so much for your help. The issue has been resolved.