Horizontal scroll starts on page load.

[sbme123]

Hey Guys 

 

I'm having an issue with the horizontal scroll automatically playing through on page load. I need the horizontal scroll to start when the user starts the scroll. 

 

Here is a live version of the build: https://syardv1.netlify.app/ 

 

Codepen:  

 

When you navigate to the hire page. It auto scrolls. Best to look on desktop atm. No mobile styling. 

 

Here is my gsap animation: 
 

let sections = gsap.utils.toArray(".panel");

        let scrollTween = gsap.to(sections, {
          xPercent: -100 * (sections.length - 1),
          ease: "none", // <-- IMPORTANT!
          scrollTrigger: {
            trigger: ".horizontal-scroll-container",
            pin: true,
            scrub: 1,
            end: "+=3000",
          },
        });

 

Here's a basic version of my html. 
 

<div class="horizontal-scroll-container">

    <section class="panel "> </section>

    <section class="panel "> </section>

    <section class="panel "> </section>

    <section class="panel"> </section>

</div>

 

& my css

 

.horizontal-scroll-container {
    /* This is the whole horizontal scroll container */
    width: 400%;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    color: #fff;
  }
  .panel {
    /* This is the indivisual pages to scroll through */
    font-weight: 300;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex: 0 0 100vw;
  }

 

Help would be greatly appreciated. 

 

Thanks

Simon 
 

See the Pen QWxgMMy by siplaster (@siplaster) on CodePen

[mvaneijgen]

Hi @sbme123 welcome to the forum! 

 

When in doubt I always make a timeline in GSAP, with this you get so much more control and options, instead of a single tween 

 

Hope it helps and happy tweening! 

 

See the Pen eYKRExe by mvaneijgen (@mvaneijgen) on CodePen

[sbme123]

Thanks @mvaneijgen I'll give this a look shortly. 

[akapowl]

 

Heyo!

 

If I am not absolutely wrong, using a timeline vs using a single tween really shouldn't make a difference in this case.

 

Here is your codepen (with GSAP and ScrollTrigger loaded now) working and not automatically tweening - even with the start set to '+=1' as you have on your website @sbme123, which btw is an invalid value for the start because starts of ScrollTriggers can not be relative values (what should they be relative to ?).

 

Edit: I had another look at your website and it looks like now you are not loading ScrollTrigger there, which would be an explanation for the auto-tweening when getting to that page you mentioned. Everything I mentioned below doesn't become less important to know when working with barba, though.

See the Pen GRGEMeW by akapowl (@akapowl) on CodePen

 

 

 

One very important piece of the puzzle you forgot to mention is, that you are using barba.js - which I bet is the cause of your issues.

 

There are a lot of things to consider when using JS with a framework that makes your website behave like a Single-Page-Application.

 

The most important with barba being 

• a) kill old ScrollTriggers when leaving a 'page' and (re-) initialize ScrollTriggers when entering a new 'page'
• b) be aware of barba's life-cycle, because at some point (if not explicitly changed by yourself) the old and new page-containers will be in the DOM at the same time stacked on top of each other, which is bound to throw off the calculations for initiated ScrollTriggers

 

I linked a couple of threads below, which have some critical information for the use of barba with ScrollTrigger. 

 

Also, I tweaked an example I made on stackblitz earlier to show a way to properly integrate that fake-horizontal scenario. Although it is kind of convoluted by now (which to a certain extent is neccessary due to the way barba works), I hope it will still help.

https://stackblitz.com/edit/web-platform-tffdg2

 

 

 

 

 

 

 

[sbme123]

Hey @akapowl this info is great. Thank you! I was struggling to find any previous topics around this. Yes apologies! I should have included that Barba was part of the build. I very much appreaciate you delving a little deeper. I've not really worked with Barba but i'll review the lifecycles again and see what I can do. I'll let you know how I get on with it all. 

 

 

[akapowl]

 

19 minutes ago, akapowl said:

Edit: I had another look at your website and it looks like now you are not loading ScrollTrigger there, which would be an explanation for the auto-tweening when getting to that page you mentioned. Everything I mentioned below doesn't become less important to know when working with barba, though.

 

I added a comment above, which I'm not sure you saw;

First things first, make sure to load ScrollTrigger, because at the moment you are not even loading it on your website!

 

 

 

8 minutes ago, sbme123 said:

Yes apologies! I should have included that Barba was part of the build.

 

No apoligies neccessary. As of now, that auto-tweening might not even be related to using barba, but just to fact that you are currently not loading ScrollTrigger. Nonetheless all that information should be helpful going forward.

 

 

 

11 minutes ago, sbme123 said:

I was struggling to find any previous topics around this [...] I've not really worked with Barba but i'll review the lifecycles again and see what I can do

 

As you can see from the posts linked, there are quite a lot of those around here. Working with barba can become tricky because it changes the way things are getting processed. My suggestion would be to really take it slow; first undersstand the core concepts of how barba works and then include everything else with that knowledge in mind, piece by piece - otherwise it can become quite the uphill battle.