Page is shaking once clicking on

[Habibur Rahman]

I am experiencing an issue with the integration of the Smooth Scrolling plugin and GSAP. The issue occurs when using a FAQ section or any accordion, or when the height of the pages decreases in any way, resulting in a shaking page. I have attached a video for illustration purposes. The issue can be resolved by disabling the smooth scrolling feature but I want the smoothscrolling plugin. I would appreciate your assistance in resolving this issue.

Here is the Video

https://www.loom.com/share/55ad04d7fc56436987d55f69c2898a3c

 

If you want to check the live example, you can check that here as well

https://wealcoder.com/dev/html/axtra/faq.html

[GreenSock]

Hi @Habibur Rahman. Thanks for being a Club GreenSock member! 💚

 

It's super difficult to troubleshoot a live site. There are just way too many factors and it's not possible to tweak and see how things are affected. Is there any way you could provide a minimal demo, like a CodePen or Stackblitz? That's significantly improve your chances of getting a good answer here. Please don't put your whole project there - just a few colored <div> elements that illustrate the problem with as little code as possible. 

 

One thing I'd try first is updating your GSAP version. It looks like you're using 3.11.2 but you should definitely update to 3.11.4. There were a few bugs that were fixed. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see a minimal demo (like in CodePen or Stackblitz), I'm pretty confident we'll be able to offer some solid advice. 

[Habibur Rahman]

Hi,

I am not sure it was correctly working on Code pan, But not working on my end. Here I am sharing the source code with a zip folder so that you guys can check the source code. I am also sharing the code here and you don't need to check the CSS code because the Accordion is coming from Bootstrap. The main issue because of ScrollTrigger Plugin. If I remove the ScrollTrigger Plugin, then it works correctly

You can check this video for the references 

https://www.loom.com/share/98ed1c7d5c984559a31a8cd6eeae992e

 

 

 

            <div class="row">
              <div class="col-xxl-12">
                <div class="faq__list-6">
                  <div class="accordion" id="accordionExample">
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="headingOne">
                        <button onclick=preventD() class="accordion-button " type="button" data-bs-toggle="collapse"
                          data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                          Acc Title
                        </button>
                      </h2>
                      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                          <p>Acc Content</p>
                        </div>
                      </div>
                    </div>

                    <div class="accordion-item">
                      <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button onclick=preventD() collapsed" type="button" data-bs-toggle="collapse"
                          data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                          Acc Title
                        </button>
                      </h2>
                      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                          <p>Acc Content</p>
                        </div>
                      </div>
                    </div>



                  </div>
                </div>
              </div>
            </div>



  <!-- All JS files --> 
  <script src="assets/js/bootstrap.bundle.min.js"></script> 
  <script src="assets/js/gsap.min.js"></script>
  <script src="assets/js/ScrollTrigger.min.js"></script>
  <script src="assets/js/ScrollToPlugin.min.js"></script>
  <script src="assets/js/ScrollSmoother.min.js"></script>
  <script src="assets/js/SplitText.min.js"></script> 

This is the HTML code I used following is the Javascript code 

  <script>
      // 20. Register GSAP
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin);  
    const smoother = ScrollSmoother.create({
      smooth: 1.35,
      effects: true,
      smoothTouch: false,
      normalizeScroll: false,
      ignoreMobileResize: true, 
    });

 
  </script>

Please check this video to get the idea about the problem. 

 

I have also shared the source folder here as well.

 

axtra.zip

[Rodrigo]

Hi,

 

What you could try is run ScrollTrigger's refresh method after the accordion item has expanded/collapsed:

// Once the show/collapse animation is complete
ScrollTrigger.refresh();

Hopefully this helps.

Happy Tweening!

[GreenSock]

14 hours ago, GreenSock said:

One thing I'd try first is updating your GSAP version. It looks like you're using 3.11.2 but you should definitely update to 3.11.4. There were a few bugs that were fixed. 

Did you try this? It was my very first suggestion and from what I can tell, it fixes the issue. Just update to 3.11.4.