vimal211 Posted April 3 Share Posted April 3 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 3 Share Posted April 3 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now