AlexandrWD's post in Animation behavior breaks down was marked as the answer
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...
AlexandrWD's post in Animation behavior breaks down was marked as the answer