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

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