Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nutfordesign

ScrollTrigger on WP with Divi Builder

Go to solution Solved by akapowl,

Recommended Posts

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/

1634899240454.png

Link to comment
Share on other sites

<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

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

  • Solution

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 :) 

 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×