Greensock Animation Platform - is it possible to reverse nested timelines?

Question

Is it possible to reverse a master timeline within GSAP? I know you can reverse a timeline that is not nested.

Here's the code:

// 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()
    }

I can get it to play forwards, just not in reverse. Do I need to tell the browser where to start in the timeline so that it can play in reverse?

Answer 1

The problem is with my code and not with GSAP. I have new timelines created on every click. How will it reverse something that it doesn't have a previous reference to? The solution would be to create the timelines outside of the click event and then based on the state, play forward or reverse the animation.