nutfordesign

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.

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; }

<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.

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/

Hi. I did some tests and saw that the problem only occurs within the Wordpress dashboard. When accessing the page with an anonymous tab, the problem does not occur. Sorry about the topic.

Hello, everyone. I am writing because I have a problem with the horizontal scroll applied within the Divi theme builder. The scroll works correctly and I managed to set some media queries to deactivate the effect on tablet and mobile. However, I have noticed that at the beginning of the scroll there is a sort of "step" as if the viewport was scrolling vertically for a few pixels. Unfortunately it's built on Divi and therefore not a link to codepen but to the development page: Development page I hope you can help me Thanks