Tony Song Posted June 10, 2022 Share Posted June 10, 2022 Dear GSAP devs, I want to add a new section on horizontal scroll, is it possible? The main goal is to allow the user to scroll to next section after clicking a button. Regards, Tony See the Pen QWQxWNz by tonywei (@tonywei) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted June 10, 2022 Share Posted June 10, 2022 Welcome to the forums. Yep! Sure is possible. Right now you're just adding a section but you're not updating the width of the container, the distance of the scrollTriggered tween or the scrollTrigger trigger positions. The key will be to use functional values and call ScrollTrigger.refresh() when you've updated everything. Pseudo code below. I tried to update your pen but you're using tailwind and I'm not familiar enough. Why don't you give it a shot! const tween = gsap.to(".section", { xPercent: () => { let sections = gsap.utils.toArray(".section"); return -100 * (sections.length - 1) }, scrollTrigger: { trigger: ".content", scrub: true, pin: true, invalidateOnRefresh } }); const addSection = () => { const sectionEl = document.createElement("section"); sectionEl.classList.add('section'); sectionEl.textContent = "New section"; UPDATE WIDTH OF CONTAINER HERE contentEl.append(sectionEl); // update scrolltrigger ScrollTrigger.refresh() } addSectionButtonEl.addEventListener('click', addSection); Link to comment Share on other sites More sharing options...
Tony Song Posted June 10, 2022 Author Share Posted June 10, 2022 hi @Cassie Thanks, seems like ScrollTrigger.refresh does something, but it's also adding empty space after the sections. I also tried to update the width of the container, but I think it's overridden every time I did scrolling, could you please help? I updated the code as well. Regards, Tony Link to comment Share on other sites More sharing options...
Cassie Posted June 10, 2022 Share Posted June 10, 2022 Sorry - I don't understand what the tailwind classes are doing.Can you possibly try with this demo so it's a little clearer? Edit - this is working now! See the Pen VwQVWzo by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Tony Song Posted June 10, 2022 Author Share Posted June 10, 2022 @Cassie No worries! just tried your demo, after I clicked on "add", the scroll not working anymore and there was an empty space on the right side, I'm not sure what is that. I also tried it on the incognito mode just in case, does it also happen to you? Link to comment Share on other sites More sharing options...
Cassie Posted June 10, 2022 Share Posted June 10, 2022 Ah sorry about that I started working on a solution and didn't fork it! My bad. Should be working now! Hopefully that gives you enough to work with and get it working in your demo. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 10, 2022 Solution Share Posted June 10, 2022 Here's a fork that tweaks some things: It adjusts the scroll position to make it look seamless even though you're changing the ratios by adding a new section. This also involves eliminating the scrub animation just for that part. Uses a CSS variable for width (explanation is in the comments) The add button is fixed on the right side of the viewport to make it easier to interact with. Randomly selects a color for the new section and numbers it (for fun) I put some notes in the comments to make it easier to follow. See the Pen ExQOwpw?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Tony Song Posted June 28, 2022 Author Share Posted June 28, 2022 @Cassie@GreenSock Sorry for the delayed reply. Thanks for all your help, the code you provided really a great help!! 1 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