[Page is shaking once clicking on]

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

[Page is shaking once clicking on]

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