[Horizontal scroll, but it is reversed]

• @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

[Horizontal scroll, but it is reversed]

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

[Horizontal scroll, but it is reversed]

@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,   

[Horizontal scroll, but it is reversed]

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

    }

  });

});

[Horizontal scroll, but it is reversed]

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%;
}

 

[Horizontal scroll, but it is reversed]

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

[bouncy effect on scroll]

Hi, @mvaneijgen thankyou so much for your effort and time, yes i was looking to achieve this similar effect, little modification can do the job.  Thanks for ur reply 
much Love ❤❤❤.

[bouncy effect on scroll]

Hi, Im new to gsap . here i was trying to replicate this smooth bouncy effect on scroll from this  pen

See the Pen QZxdVX by ReGGae (@ReGGae) on CodePen

 , but in my case its like repeating after the ends.i dont know its the correct way to animate that bouncy effect

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