horizontal scroll Issue with Horizontal Scrolling.

[fawad4Real]

Hi Everyone, Hope everyone is doing good. I am facing a small problem that I cant seem to solve. issue is that while i scroll vertically there a section that scroll horizontally (like a image carousel) then unpin and continou scrolling vertically. 

ISSUE:  the issue is where the trigger should unpin.  now it unpin when the left side of last image has touched the left side of parent div leaving a big white space.

Example From Images.

What I want:


when the last image is shown, just stop the horizontal scrolling and unpin the section don't drag the last image to the right side

See the Pen abMRqLZ by Fawad4real (@Fawad4real) on CodePen

[mvaneijgen]

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

As you can see if you remove ScrollTrigger your animation is not correct, it not stopping where you want it to stop and no amount of ScrollTrigger code is going to fix an animation that is not correct. 

 

So here I've moved to a timeline (this is not necessary, but I personally find it easier to understand what is a tween and what is ScrollTrigger). I've hidden the first blue block, so we can directly see the images and see what the animation is doing. Instead of your xPercent I've set it to x and got the width of all the img elements (which is 320px each) I then calculate the total which is 320 * 4 = 1280, I used this value to move the elements that a mount, but that isn't correct because depending on the width of the browser at least one is already visalbe and as many as 2.4 could be visible, so we need to subtract the width of the container they are in from 1280.

 

Again ScrollTrigger is disabled to make sense of everything and if you're happy with the animation you can enable it again, to see how that would work on scroll. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen bGZmvxp?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[fawad4Real]

 you have explained it to me so well, thanks a lot. from now on, I will create the animation first, then use scrolltrigger. I have understood your logic..  let me implement this in my code.