Horizontal scroll, but it is reversed

[Arun_ms]

hello guys, i was trying to creating a horizontal section scroll, but its move left to right, i want to move the opposite direction.i have tried many solution given by ai but still the same.  here is the codepen code, if someone can help it will be amazing 
 , 

See the Pen jORMQrM by Rare4pple (@Rare4pple) on CodePen

[Arun_ms]

Quote

when i checked, i have found that the value changing here in flex affect the direction, when its lower it will move right to left, when its higher it will move left to right. in my case the this flex value is the width of the container that is 58.5%. 

.horizontalImageDiv{ flex: 0 0 58.5%;
}

 

[Arun_ms]

hello guys, i updated the js, 
  var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth) ; this changed the direction now its working fine, but the speed is very slow, and its not even reaches the end of the container. tried changing the end: value 

 

const horizontalSections = gsap.utils.toArray('section.horizontalSec');

 

horizontalSections.forEach(function (sec, i) {  

  var thisPinWrap = sec.querySelector('.pinWrap');

  var thisAnimWrap = thisPinWrap.querySelector('.horizontalWrap');

 

  var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth) ;

 

  gsap.fromTo(thisAnimWrap, {

    x : 0

}, {

  x: () => getToValue(),

    ease: "none",

    scrollTrigger: {

      trigger: sec,    

      start: "top top",

      end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),

      pin: thisPinWrap,

      invalidateOnRefresh: true,

      anticipatePin: 1,

      scrub: 1,

      markers: true,

      dutation:1

    }

  });

});

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

 

In your case you want to move the elements to the left on the x axis, the x (translateX in CSS) starts at 0 and positive numbers move to the right and negative numbers move to the left, so adding a minus sign (-) for your number makes it move to the left. Using AI is all fine, but you do have to test the values it gives you (for that matter, you also have to test your own logic) to make sure it is what you think it is! 

 

So when copying code from the internet you have to console.log() the values you're getting and test them if they make sense to you. In this case what I would do, is pick a fixed screen size and just manually type in a number until the animation looks like you want and then try to get these values dynamically. Getting the scrollWidth of the element gets you around 2000px, but moving that amount is a bit to much, so you subtract the window width from it, but that is to much, on my screen you should move around 1500px, so you need to get a random 500px from some where, where could this be? That I'll leave for to find. 

 

I've also moved to a timeline to which I've given ScrollTrigger control, this in my option makes the code much easier to read. Also you almost never need a .fromTo() tween a .to() or a .from() is all you need.

 

Hope it helps and happy tweening! 

 

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

[Arun_ms]

@mvaneijgen hello, thank you so much for ur reply.  im  not that good at coding, still learning new things and the logics. i kinda understand what ur trying to explain, however the issue im facing is solved which i posted on the above post, is that the correct way, besides after solving that issue its not fully reaching the end,   

[mvaneijgen]

In theory this has nothing to do with coding and this is just math. The elements need to move their entire width minus some value, because the card is already visible and you want the last one to stay. 

 

So lets say your element is 2000px wide and the hard coded value of 1500px seems right, so you need to subtract 500px of the width of the element, the screen is around a 1000px wide, which is not 500px, but half the screen is 500px! 

 

I would check my demo and read through it line by line I’ve placed some comments in your JS

[akapowl]

3 hours ago, Arun_ms said:

besides after solving that issue its not fully reaching the end

That is because you have a huge margin-left set on the .pinWrap via CSS which is not included in any way within the values you are currently using and you never add it to your calculations in any form. If you'd do so, it'd work just fine.

I multiplied it by 2 here so basically it will end up with the same spacing on the right now when the tween is finished.

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

 

[Arun_ms]

@mvaneijgen Thanks again for your reply. I like the way you explain things, and that got me thinking. Finally, I found the solution. Thank you so much. Can I get one last help? In the previous post, you told me, 'The best thing to do when working with ScrollTrigger is to remove it!' This seems counterintuitive, but ScrollTrigger is just animating something on scroll. I would like to know more about this, like for example: the way I'm doing is kind of doing both at the same time (animation and scroll). How are you approaching this, and what are the best practices? Because I'm really looking forward to learning animations and GSAP. It would be great if I could get knowledge from experienced people. Thank you once again for your time and reply.

[mvaneijgen]

Personally I always like to start with a timeline. Right now you have a single gsap.fromTo() tween, but I've found that staring with a timeline allows you to be much more creative and do more than just a singel animation. This also allows you to easily toggle ScrollTrigger on and off. It is a balance of course you want it to happen on scroll, but if there is a bug in your animation no amount of ScrollTrigger code is going to fix that animation, so I'm constantly switching to turning ScrollTrigger on and of. 

 

I also heavily rely on codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. And when you get stuck you can easily share your work.

 

Also check out this awesome getting started guide https://gsap.com/resources/get-started/ 

 

The GSAP YouTube channel is also a great resource certainly the video blow https://www.youtube.com/c/GreenSockLearning/videos or our own @Carl is such a help sharing general concepts https://www.youtube.com/user/snorklTV/videos.

 

Hope it helps and happy tweening! 

 

 

 

[Arun_ms]

• @akapowl ,I'm extremely sorry. I did not see your message. Thanks for the solution and also for pointing out the "margin-left" which I completely forgot. Thank you for your reply.<3 <3. Have a nice day.  @mvaneijgen @akapowl