Animation behavior breaks down

[AlexandrWD]

When using a resolution of 2048x1080 and 3840x2160 the animation on the first block starts to "jump" and does not work. 
I assume it's because the end of the animation is many times the size of the scroll. Can you please tell me how to fix this?

See the Pen mdMMPEM by alexandr-github (@alexandr-github) on CodePen

[OSUblake]

Your end value gets smaller and smaller as the screen gets wider. If you turn the markers on, you'll see that eventually the end marker will go above the start marker.

 

So you'll probably need to make the functions for x and end check to make sure the area is big enough to scroll horizontally, and conditionally return a value for the appropriate size.

end: () => {
  if (thisAnimWrap.scrollWidth > window.innerWidth) {
    return "+=" + (thisAnimWrap.scrollWidth - window.innerWidth)
  }
  return ...
},

 

[AlexandrWD]

Great!

 

horizontalSections.forEach(function (sec, i) {  
 
  var thisPinWrap = sec.querySelector('.pin-wrap');
  var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap');

  var getToValue = () => -(thisAnimWrap.scrollWidth - thisPinWrap.offsetWidth);
 
  gsap.fromTo(thisAnimWrap, {
    x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()
  }, {
    x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0,
    ease: "none",
    scrollTrigger: {
      trigger: sec,  
      start: "top top",
      end: () => {
          return "+=" + (thisAnimWrap.scrollWidth - thisPinWrap.offsetWidth);
      },
      pin: thisPinWrap,
      invalidateOnRefresh: true,
      scrub: true,
    }
  });

});

Instead of the page width, I used the container width...