gsap scrolltrigger scroll the body of the webpage

[vimal211]

I have a section called lai-main__section4-bottom which has an accordion inside it. When the section hits the viewport I want to stop the page scroll and open the accordion one by scroll and once all the accordions are closed the scroll for the entire page needs to resume. I'm using gsap scrollTrigger for it.

The issue I'm facing is once the section hits the viewport the accordion open is working fine, but the entire page view is also scrolling, which is kind of overlapping. I have attached the image for that and provided my code

<section> 
<div class="lai-main__section4-bottom">
                <div class="lai-main__section4-bottom-accordion">
                    <div class="lai-main__section4-bottom-accordion-item active first">
                        <span class="lai-main__section4-bottom-accordion-header">Keeps your documents secure</span>
                        <div class="lai-main__section4-bottom-accordion-content">
                            <p>jadfs.</p>
                        </div>
                        <div class="lai-main__section4-bottom-accordion-scrolldiv"></div>
                    </div>
                   
                    <div class="lai-main__section4-bottom-accordion-item">
                        <span class="lai-main__section4-bottom-accordion-header">Lightning - Fast processing
                            speed</span>
                        <div class="lai-main__section4-bottom-accordion-content">
                            <p>Oosfpojs</p>
                        </div>
                        <div class="lai-main__section4-bottom-accordion-scrolldiv"></div>
                    </div>
                    <div class="lai-main__section4-bottom-accordion-item">
                        <span class="lai-main__section4-bottom-accordion-header">Strike up a conversation with
                            GenAI</span>
                        <div class="lai-main__section4-bottom-accordion-content">
                            <p>Osodihfwious</p>
                        </div>
                        <div class="lai-main__section4-bottom-accordion-scrolldiv"></div>
                    </div>
                 
        </section>
        <section class="lai-main__section5">
            <h2>
                Our solution across industries
            </h2>
        </section>


js code:

document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(ScrollTrigger);

  var targets = gsap.utils.toArray(
    ".lai-main__section4-bottom-accordion-content"
  );

  var middleTargets = targets;
  var first = middleTargets.shift();
  var last = middleTargets.pop();

  console.log(first);
  console.log(middleTargets);
  console.log(last);

  gsap.set(first, { display: "block" });

  const timeline = gsap.timeline({
    scrollTrigger: {
      trigger: ".lai-main__section4",
      scrub: 0.3,
      markers: true,
      pin: true,
    },
  });
  timeline
    .to(first, { display: "none", duration: 1 })
    .to(middleTargets, {
      display: "block",
      duration: 1,
      stagger: {
        each: 2,
        yoyo: true,
        repeat: 1,
      },
    })
    .to(last, {
      duration: 1,
      display: "block",
    });
});

 

See the Pen dyLJvdO by vimal211 (@vimal211) on CodePen

[Rodrigo]

Hi,

 

Maybe these demos can provide a good starting point:

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

 

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

 

Hopefully this helps.

Happy Tweening!