如果我理解正确的话，我想你可以这样做：

var scrollButton = document.getElementById('scroll');
var container = document.getElementsByClassName('container')[0];
var inner = document.getElementsByClassName('inner')[0];
var containerWidth = 0;
var containerMaxWidth = 0;
var totalDuration = 1;
var duration = 0.8;
var ease = Power2.easeInOut;
var direction = '';
var DIRECTION_LEFT = 'DIRECTION_LEFT';
var DIRECTION_RIGHT = 'DIRECTION_RIGHT';
var currProgress = 0;
var progressFactor = 0.2;
var tl = new TimelineMax({
  paused: true
});

function initVariables() {
  containerWidth = container.offsetWidth;
  TweenMax.set(container, {
    position: 'absolute',
    width: 'auto'
  });
  containerMaxWidth = container.offsetWidth;
  TweenMax.set(container, {
    clearProps: 'all'
  });
}

function initTimeline() {
  tl.to(inner, totalDuration, {
    x: -containerMaxWidth + containerWidth,
    ease: Power0.easeNone
  });
}

function initListeners() {
  scrollButton.addEventListener('click', doScroll, false);
}

function doScroll() {
  if (direction === DIRECTION_RIGHT) {
    currProgress = currProgress - progressFactor;
  } else {
    currProgress = currProgress + progressFactor;
  }

  if (currProgress >= 1) {
    currProgress = 1;
    direction = DIRECTION_RIGHT;
  } else if (currProgress <= 0) {
    currProgress = 0;
    direction = DIRECTION_LEFT;
  }

  TweenMax.to(tl, duration, {
    progress: currProgress,
    ease: ease
  });
}

//
initVariables();
initTimeline();
initListeners();

.container {
  width: 400px;
  border: 1px solid green;
  overflow: hidden;
}
.inner {
  white-space: nowrap;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, magnam. Ut sunt nihil quo reprehenderit in voluptas voluptatum at tempore accusamus suscipit ipsam ea atque, unde, itaque quas pariatur architecto.
  </div>
</div>
<p>
  <span id="scroll">Scroll</span>
</p>

基本上，这里正在发生的事情是：

• container元素的width存储在一个名为containerWidth的变量中。
• 然后将其临时设置为position: absolute沿着width: auto。
• 这个container元素的新宽度存储为containerMaxWidth。
• 临时样式在使用TweenMax的clearProps: 'all'设置后立即删除。
• 创建名为tl的TimelineMax，其具有从x: 0到其可以滚动到的maximum位置的定义运动，在本例中为-containerMaxWidth + containerWidth，并且此时间轴最初设置为paused。
• direction变量间接用于更新TimelineMax示例的progress。
• currProgress直接用于更新TimelineMax示例的progress。
• 这个currProgress是根据上面确定的direction计算出来的。
• 最后，补间更新了tl示例的progress属性。

Here是上面的codepen结果。