Greensock动画平台 - 是否可以反转嵌套时间轴？

Question

是否可以在GSAP内撤销主时间轴？我知道你可以撤销没有嵌套的时间轴。

以下是代码：

// hide copy content divs
const hideCopyContentDivsTl = new TimelineMax()
hideCopyContentDivsTl.to(copyContentDivs, 1, {
  height: 0,
  width: 0,
  autoAlpha: 0
})

// shrink copy wrapper div
const shrinkCopyWrapperTL = new TimelineMax()
shrinkCopyWrapperTL.to(copyWrapperDiv, 1, {
  width: '2%',
  height: '4%'
})

// fade remove bg and change to white
const fadeLargeBgImgTl = new TimelineMax()
fadeLargeBgImgTl.to(largeImage, 1, {
  backgroundColor: "#fff"
})

  // the master timeline to manage the parts
    const masterTimeline = new TimelineMax({paused: true})
    masterTimeline.add(hideCopyContentDivsTl)
                  .add(shrinkCopyWrapperTL)
                  .add(fadeLargeBgImgTl)

// assume that there is a mechanism to change the state of playVideo between true and false
if (this.state.playVideo === false) {
      console.log("should play: ", masterTimeline)
      masterTimeline.play()
    } else {
      console.log("should reverse: ", masterTimeline)
      masterTimeline.reverse()
    }

我可以让它向前发挥，而不是相反。我是否需要告诉浏览器在时间轴中的起点，以便它可以反向播放？

Answer 1

问题在于我的代码而不是GSAP。每次点击都会创建新的时间表。它将如何扭转它之前没有引用的东西？解决方案是在click事件之外创建时间轴，然后根据状态，播放或反转动画。