CODEWITHSUNDEEP
javascriptgsap
Brian
Brian

Reputation: 412

Greensock nested timelines not behaving as expected

I have the following code:

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();

at the moment slide1Timeline plays but slide21Timeline does not. I am trying to get them to play one after another... I have tried all sorts and failed... could someone please tell me what I'm doing wrong?

Upvotes: 0

Views: 2501

Answers (1)

Jack
Jack

Reputation: 2970

I believe the problem is that you've got a few infinitely repeating tweens inside slide11Timeline, so it's totalDuration() is basically infinity. You're using add() to drop them into the mainTimeLine, but keep in mind that by default, add() will SEQUENCE the children, using the end of the timeline as the insertion point.

Since the first nested timeline has a duration that's insanely long, you never get to see the subsequent slide21Timeline animation because its position on the mainTimeLine is WAAAAY off in the future.

But don't worry - you have total control over where the insertion point is - just use the 2nd parameter for add(). Here are some options:

//to make them both start at 0 (run concurrently):    
mainTimeLine.add(slide1Timeline, 0);
mainTimeLine.add(slide21Timeline, 0);

//or to make slide21Timeline run at the 60-second spot of mainTimeLine:
mainTimeLine.add(slide21Timeline, 60);

Also note that if you want to

Upvotes: 3

Related Questions