Share Posted October 22, 2021 Hello everyone. I'm using the ScrollTrigger on WP with the Divi theme builder and so far I've had no problems achieving the desired effect: a website with 100% horizontal scrolling on Desktop. Today, however, I ran into a problem: when I added the latest sections to the homepage, I noticed that each section was reducing its width as if it had run out of space. As I add new sections, the previous ones become even smaller. The sections should each occupy 100% of the width of the viewport. Why is this problem occurring? Thank you in advance for your help. https://development.nutfordesign.com/horizontal-scroll-with-gsap/ Link to comment Share on other sites More sharing options...
Author Share Posted October 22, 2021 <script> jQuery(document).ready(function($){ gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ "(min-width: 980px)": function(){ var allSections = $('.horizontal-section'); allSections.wrapAll('<div class="horizontal-container"/>'); gsap.to(allSections, { xPercent: -100 * (allSections.length - 1), ease: "none", scrollTrigger: { trigger: ".horizontal-container", pin: true, start: "top top", scrub: 1, snap: false, // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth } }); } }) }); </script> This is the script that I'm using. Link to comment Share on other sites More sharing options...
Author Share Posted October 22, 2021 And then the css styles. .horizontal-container { width: 300%; height: 100%; display: flex; flex-wrap: nowrap; max-width: none; } #page-container { overflow: hidden; } .horizontal-section { width: 100%; will-change: transform; } Link to comment Share on other sites More sharing options...
Solution Solution Share Posted October 22, 2021 Hello @nutfordesign It's always best to include a minimal demo, so people on here can tinker with things as it often is very much impossible to offer any help from just looking at code snippets or dealing with hundreds or thousands of lines of code on live websites. To me, your problem sounds like a styling issue, that has nothing to do with GSAP or ScrollTrigger in the first place. As you are using flex on your .horizontal-container you will probably just have to specify the flex behaviour of your .horizontal-section. If they are supposed to be 100vw each, try this .horizontal-section { width: 100%; will-change: transform; flex: 0 0 100vw; } https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex ...and if it doesn't help at all, a minimal demo would really be helpful to offer a more profound answer. Hope it helps, though 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 22, 2021 Thank you very much for the solution. Unfortunately I tried to figure out if it was a css-related problem but I hadn't looked at the section properties. I am trying to follow guides and tutorials to learn how to handle GSAP with more confidence for my projects. Thank you for your 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