javascript - Greensock のネストされたタイムラインが期待どおりに動作しない

Question

次のコードがあります。

var mainTimeLine = new TimelineLite({paused:true});

var whiteGlow = "0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5)";

var slide1 = document.getElementById("slide1"); //or use jQuery's $("#photo")
var circle11 = document.getElementById("circle1-1"); //or use jQuery's $("#photo")
var circle12 = document.getElementById("circle1-2"); //or use jQuery's $("#photo")
var backgroundLines1 = document.getElementById("backgroundLines1"); //or use jQuery's $("#photo")
//TweenMax.to(backgroundLines1, 2, {right:"100px", repeat:-1, ease:Linear.easeNone});

var text11 = document.getElementById("text1-1"); //or use jQuery's $("#photo")
var text12 = document.getElementById("text1-2"); //or use jQuery's $("#photo")
var text13 = document.getElementById("text1-3"); //or use jQuery's $("#photo")
var man1 = document.getElementById("man1"); //or use jQuery's $("#photo")
var idgLogo = document.getElementById("idg-logo"); //or use jQuery's $("#photo")

var slide2 = document.getElementById("slide2"); //or use jQuery's $("#photo")

var slide3 = document.getElementById("slide3"); //or use jQuery's $("#photo")

//slide1.style.display = 'block';

//slide1.style.display = 'block';
var slide11Timeline = new TimelineLite();
var slide12Timeline = new TimelineLite();

var slide1Timeline = new TimelineLite({paused:false});


slide11Timeline.add([
        TweenLite.to(slide1, 0, {left:"0"}),
        TweenMax.to(circle11, 60, {rotation:360, repeat:-1, ease:Linear.easeNone}),
        TweenMax.to(circle12, 60, {rotation:-360, repeat:-1, ease:Linear.easeNone}),
        TweenLite.from(circle11, 10, {opacity:"0.0"}),
        TweenLite.from(circle12, 10, {opacity:"0.0"}),
        TweenLite.from(text11, 1, {opacity:"0.0"})
    ]);

slide12Timeline
    .from(text11, 1, {top:"-40px", ease:Expo.easeOut,delay:2})
    .to(text11, 2, {
        textShadow:whiteGlow
        //color:"#91ff00"
    })
    .from(text12, 1, {opacity:"0.0"})
    .from(text13, 1, {opacity:"0.0"})
    .from([idgLogo, man1], 1, {opacity:"0.0"})
    .to(slide1, 2, {left:"-10000", delay:2});


slide1Timeline.add([slide11Timeline,slide12Timeline]);


var slide21Timeline = new TimelineLite({paused:false});
slide21Timeline.to(slide2, 1, {left:"0"});

mainTimeLine.add(slide1Timeline);
mainTimeLine.add(slide21Timeline);

mainTimeLine.play();

現時点では、slide1Timeline は再生されますが、slide21Timeline は再生されません。私はそれらを次々と再生させようとしています...私はあらゆる種類のものを試しましたが失敗しました...誰かが私が間違っていることを教えてもらえますか?