ScrollSmoother with accordion animation makes page jump

[gabbana]

Hello, I am trying to implement an accordion animation along with ScrollSmoother. However, the page seems to jump and scroll up each time an accordion is toggled. I have tried running 'ScrollTrigger.refresh()` and `ScrollTrigger.update()` right before the accordion animation as well as right after the accordion animation, but the page seems to jump when those methods are fired. This issue is most apparent when there are elements animated using ScrollTrigger above the accordion elements.

 

Any help would be much appreciated. Thank you in advance.

 

 

See the Pen vYVXmbw by gabanna (@gabanna) on CodePen

[Rodrigo]

Hi @gabbana and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock!

 

There are a few issues in your example. First you're missing the closing tags for the wrapper and content div tags. Also your onComplete callbacks are executing the refresh method on startup, not when the tween is completed:

// Calls refresh on startup
gsap.to(content, {
  duration: 0.3,
  height: "auto",
  autoAlpha: 1,
  ease: "power3.out",
  onComplete: ScrollTrigger.refresh(),
});

// Calls refresh when the tween is completed
gsap.to(content, {
  duration: 0.3,
  height: "auto",
  autoAlpha: 1,
  ease: "power3.out",
  onComplete: () => ScrollTrigger.refresh(),
});

Finally it seems that you might have ran into some kind of issue, but I'm not sure about it. For the moment removing the speed option from the ScrollSmoother config object seems to work as expected:

const smoother = ScrollSmoother.create({
  smooth: 2,
  effects: true,
  // speed: 1.65,
  smoothTouch: 0.0001,
  normalizeScroll: true,
  ignoreMobileResize: true,
});

Please stand by and comment out your speed option for now. We'll keep you posted about this.

Happy Tweening!

[gabbana]

3 hours ago, Rodrigo said:

Hi @gabbana and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock!

 

There are a few issues in your example. First you're missing the closing tags for the wrapper and content div tags. Also your onComplete callbacks are executing the refresh method on startup, not when the tween is completed:

// Calls refresh on startup
gsap.to(content, {
  duration: 0.3,
  height: "auto",
  autoAlpha: 1,
  ease: "power3.out",
  onComplete: ScrollTrigger.refresh(),
});

// Calls refresh when the tween is completed
gsap.to(content, {
  duration: 0.3,
  height: "auto",
  autoAlpha: 1,
  ease: "power3.out",
  onComplete: () => ScrollTrigger.refresh(),
});

Finally it seems that you might have ran into some kind of issue, but I'm not sure about it. For the moment removing the speed option from the ScrollSmoother config object seems to work as expected:

const smoother = ScrollSmoother.create({
  smooth: 2,
  effects: true,
  // speed: 1.65,
  smoothTouch: 0.0001,
  normalizeScroll: true,
  ignoreMobileResize: true,
});

Please stand by and comment out your speed option for now. We'll keep you posted about this.

Happy Tweening!

 

@Rodrigo Thank you so much! I've updated the codepen example based on your feedback. It seems the speed option in ScrollSmoother was the main source of the issue. 

[GreenSock]

Just so you know, it should be resolved in the next release. You can preview it on CodePen: 

• ScrollSmoother: https://assets.codepen.io/16327/ScrollSmoother.min.js
• ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js