Responsive Horizontal Scroll

[TerraHQ]

Hey There, 

Would this be a good base to work on for an horizontal scroll pinned gallery? It is happening to my team that with simple elements, it works ok, but as soon as we add cards, texts, etc. it doesn't respond as it should. 

 

Therefore, before keep trying stuff, I want to make sure that the base is ok and that I'm not making any mistakes here that I'm then dragging along.

 

Also, if I wanted to include a debounce/throttle in the getScrollAmount function, would that be possible? Is that needed? The reason I ask is because that's an idea we had in order to give it some time to respond when CSS is changed. 

Thanks in advance!! ❤️ 

See the Pen YzdNEjj?editors=0110 by andresclua (@andresclua) on CodePen

[Carl]

Hi, As the person who created that demo originally, I think it's a very solid base.

See the Pen PoxojaO?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

I really don't know what you mean by "it doesn't respond well". Perhaps you can be more clear.

 

the getScrollAmount() function gets called when the window is resized or the ScrollTrigger is refreshed. Those values are neccessary for all the configuration work to happen. You most likely should not delay those calculations.

 

If you need more flexibility look into gsap.matchMedia() as it will allow you to run custom code when you hit certain break-points in browser size and do whatever cleanup or configuration you deem necessary.

[TerraHQ]

Hey @Carl, first of all -> bought your course, looks solid!  

I will use this, and if something does not work as expected will let you know.

TSM!

[TerraHQ]

Hey @Carl

See the Pen YzdNEjj?editors=1010 by andresclua (@andresclua) on CodePen

I have updated the some stuff on the codepen and I know I'm doing something wrong, because on resize it breaks.

Any idea what could be?
 

[Carl]

glad to hear you enrolled in the courses!

 

For debugging I would suggest you log all the dynamic values you are using whenever you expect them to update.

I added some logs in the tween() and getScrollAmount() functions.

 

Also it's good to outline all the items you are getting measurements from.

 

It seems something funky is happening with your wrapper. Its border doesn't seem to enclose all of its child elements

I'm guessing this is affecting the measurement values you're getting.

 

 

 

take this demo and resize it and scroll up and down. you'll see things break out of the red outline

 

 

 

See the Pen JjwEvYZ?editors=0010 by snorkltv (@snorkltv) on CodePen

 

I'd suggest going through the css and seeing if there is an alternate setup you can use.

also play around with pin spacing on and off to see if that changes anything.

[TerraHQ]

Hey @Carl, thanks for your help on this

I took your example and only modified
<h2>Austria</h2>
to 
<h2>I never been to Austria</h2>
and added a 1 red pixel in the races div, and the same thing happens with the wrapper. We've added a pink border so you could see it, here's the link: 

See the Pen ExGZGYb by andresclua (@andresclua) on CodePen

However, even if the elements appear to be "outside" of the wrapper, your codepen does work on resize and it behaves perfectly, and mine doesn't.

Do you have any insights on why this may be happening?
Thanks again! Appreciate the help here

 

[TerraHQ]

 

hhey Carl, this seems to be fixed, it was a comms issue.

thanks in advance! will learn more from your course and avoid asking questions here  

Have a great weekend.

[Carl]

Do you have a fork of your fix working? I'm curious what a comms issue is.

 

check this update. you should be able to see the magenta right border on the last item after resizes

 

See the Pen LYMxvra?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Look at the tween() function

 

this.sc = ScrollTrigger.create({
            end: () => `+=${this.getScrollAmount() * -1}`,
            trigger:this.DOM.element,
            animation:this.tween(),
            start:this.start,
            pin:this.DOM.pin,
            markers:this.markers,
            scrub:1,
            invalidateOnRefresh:true,
          
        }) 

tween(){
      console.log("new tween returned")
        return gsap.to(this.DOM.wrapper, {
            x: this.getScrollAmount(),
            ease: "none",
        });
    }

 if you check the console logs while resizes you will see that "new tween returned" only gets called once on initial load... not on resize.

 

On resize we have invalidateOnRefresh set to true.

This means that the animation associated with the ScrollTrigger will have its values flushed and reset.

It doesn't mean that the function that returned the animation will be called again.

When tween() first runs this.getScrollAmount() runs and returns the x value. That x is sort of hard-coded into the tween.

The only way that value will change is if it was originally a function-based value, not just a value returned by a function.

 

I found this fix to do the trick

 

tween(){
      console.log("new tween returned")
        return gsap.to(this.DOM.wrapper, {
            x: ()=> this.getScrollAmount(), //function-based value ()=>
            ease: "none",
        });
    } 

 

An odd side issue however is that somehow the getScrollAmount() is slightly off and I had to subtract an arbitrary number of pixels.

 

return -(racesWidth - window.innerWidth) -20

 

hope this gets you close enough.

 

Its always fine to ask questions but I'm confident that with the more lessons you do you'll be able to figure out more on your own.

This one was a bit tricky for sure.

 

 

 

 

[TerraHQ]

hey @Carl - sorry for late reply, It was a communication issue that I had with the team I was working this, your solution works great!
even update the start position for small sizes