如何使GSAP时间轴的一部分不与ScrollMagic滚动？

Question

所以我在这里https://codepen.io/gulnoor1/pen/JxJWBB已经部分解决了这个问题。但是问题在于，时间轴运行一次后，时间轴的功能部分不会通过ScrollMagic反转。 div首先转换X，然后边界半径发生变化，而不必绑定滚动，最后再次转换。但是在再次滚动时不会反转边框半径部分。如何使整个时间轴反向？这是代码笔中的javascript：

var controller = new ScrollMagic.Controller();

var tl = new TimelineMax();
var tl2 = new TimelineMax();

function myFunction(){
  tl2.to('.box', 0, {borderRadius: 10});
}

tl
.to('.box', 1, {x: 200})
.add( 
  function(){
    tl2
      .to('.box', 5, {borderRadius: 100})
  } 
)
.to('.box', 1, {scale: 1.5});

var scene = new ScrollMagic.Scene({
    triggerElement: '.box',
    duration: 200
})
.setTween(tl)
.addTo(controller);