Horizontal Scroll inside a responsive container

[JasonD]

Well, I'm battling with this one.  I'm trying to get my project over the finish line by creating a horizontal scroll that works inside a responsive container.  The codePen is there for review.  I've watched Carl's Horizontal Scroll Series and have probably been looking at this too long.  

When I get near the end of the scroll, my animations don't play.  Most of Carl's math is for the whole window, not sure where to take it from here.  

 

Thanks

See the Pen 33972a01bee2a9f67cd007bb4b7155ff?editors=1010 by zenogy (@zenogy) on CodePen

[Rodrigo]

Hi Jason,

 

The issue is that you're considering the window object as the parent of the element (or the parent to have the width of the browser window). In reality the parent of the element you're tweening left/right is less than that, so that alters the calculation being made.

 

This seems to work the way you expect:
 

const infoWrapper = document.querySelector(".infoWrapper");
const info = document.querySelector(".info_graphic");

function getScrollAmount() {
  let infoWidth = info.scrollWidth;
  return (infoWrapper.clientWidth - infoWidth);
}
const tween = gsap.to(info, {
  x: getScrollAmount,
  duration: 3,
  ease: "none"
});

ScrollTrigger.create({
  trigger: ".infoWrapper",
  start: "top top",
  end: () => `+=${getScrollAmount() * -1}`,
  pin: true,
  animation: tween,
  scrub: 2,
  invalidateOnRefresh: true
  // markers:true,
});

Your codepen is private so we can't fork it, so I had to copy/paste everything and it took me a few minutes to realize that you had some code in the HTML head section of the codepen. Here is a demo:

See the Pen LYqeJzL by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[JasonD]

So just:

const infoWrapper = document.querySelector(".infoWrapper");

and

return infoWrapper.clientWidth - infoWidth;

That was my mistake?  I tried clientWidth. I guess I need to read up a bit more about how the math works.

[Rodrigo]

Yeah, more than a math issue is the logic issue related to the specific HTML you have in place. That of course gets translated in a calculation error, but not because the Math is done improperly, but because the numbers you are using do not reflect the reality of the scenario you have in place. Is like you should be doing this: 4 - 12 = -8, but instead you're doing this 4 - 8 = -4. The calculation is right, but the numbers used for it are wrong.

 

Happy Tweening!