Greensock Animation Platform - ist es möglich, verschachtelte Timelines umzukehren?

Question

Ist es möglich, eine Master-Timeline in GSAP umzukehren? Ich weiß, dass Sie eine Zeitachse umkehren können, die nicht verschachtelt ist.

Hier ist der 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() 
    } 

Ich kann es nach vorne zu spielen bekommen, nur nicht in umgekehrter Richtung. Muss ich dem Browser sagen, wo er in der Timeline starten soll, damit er rückwärts spielen kann?

Answer 1

Das Problem ist mit meinem Code und nicht mit GSAP. Ich habe bei jedem Klick neue Zeitleisten erstellt. Wie wird es etwas umkehren, auf das es vorher keinen Bezug hatte? Die Lösung wäre, die Zeitachsen außerhalb des Klickereignisses zu erstellen und dann basierend auf dem Status die Animation vorwärts oder rückwärts abzuspielen.