ScrollTrigger on WP with Divi Builder

[nutfordesign]

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/

[nutfordesign]

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

[nutfordesign]

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

 

[akapowl]

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  

 

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