Greensock Animation Platform - ネストされたタイムラインを元に戻すことは可能ですか？

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ではありません。クリックごとに新しいタイムラインが作成されます。以前に参照していないものをどのように元に戻すのでしょうか？その解決方法は、クリックイベントの外でタイムラインを作成し、その状態に基づいてアニメーションを再生または逆転させることです。