Jump to content


Main timeline not playing from beginning?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a problem with my current code, it seems to big of a hassle to put in codepen and make it work since it has lots external files so i am only posting the relevant JS code.

var tlAddDevices = new TimelineLite();

tlAddDevices.fromTo(desktopHome, devicesTime, {x: -100,y: 100,opacity: 1,display: "block"}, {x: -100,y: 170,opacity: 1,zIndex: -1,},0);
tlAddDevices.fromTo(laptopHome, devicesTime, {x: -600,y: 170,opacity: 0,display: "block"}, {x: -420,y: 371,opacity: 1,},0);
tlAddDevices.fromTo(tabletHome, devicesTime, {x: -0,y: 170,opacity: 0,display: "block"}, {x: -130,y: 429,opacity: 1,},0);
tlAddDevices.fromTo(smartphoneHome, devicesTime, {x: -100,y: 400,opacity: 0,display: "block",zoom: 0.5}, {x: 0,y: 446,opacity: 1,zoom: 1,},0);
tlAddDevices.fromTo(bmw1, devicesTime, {x: 0,y: -70,opacity: 1,display: "block",}, {x: 0,y: 0,opacity: 1,},0);

var removeDevicesTL = new TimelineMax()
    removeDevicesTL.to(laptopHome, 2, { opacity: 0, x: 100 },0);
    removeDevicesTL.to(tabletHome, 1.5, { opacity: 0, x: 100 },1);
    removeDevicesTL.to(smartphoneHome, 1, { opacity: 0, x: 100 },1.5);

var tl3 = new TimelineMax();
var showTextLength = 3;

    .to(bmw2, transitionDuration, { opacity: 1})

    .to(bmw3, transitionDuration, { opacity: 1 })

    .to(iex, transitionDuration, { opacity: 1 })

    .to(weekendDeals, transitionDuration, { opacity: 1 })

    tl3.to(dashboard, transitionDuration, { opacity: 1 })


var tlText = new TimelineMax()
    .to(textSlides[0], transitionDuration, { opacity: 1, y: "+=100" })

    .to(textSlides[0], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" })
    .set(textSlides[0], { y: "-=100" })

    tlText.to(textSlides[1], transitionDuration, { opacity: 1, y: "+=100"})
    tlText.to(textSlides[1], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" })
    tlText.set(textSlides[1], { y: "-=100" })

    tlText.to(textSlides[2], transitionDuration, { opacity: 1, y: "+=100"})
    tlText.to(textSlides[2], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" })
    tlText.set(textSlides[2], { y: "-=100" })

    tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" })
    //tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" })
    //tlText.set(textSlides[3], { y: "-=100" })

var mainTimeLine = new TimelineLite()
    .add(tl3.tweenFromTo("startDekstopSlideshow", "showEIX"),"set1")
    .add(tlText.tweenFromTo("Branded-leads", "Groot-bereik"),"set1")

    .add(tl3.tweenFromTo("showEIX", "showWeekendDeals"),"set2")
    .add(tlText.tweenFromTo("Groot-bereik", "Dashboard"),"set2")

    .add(tl3.tweenFromTo("showWeekendDeals", "showDashboard"),"set3")
    .add(tlText.tweenFromTo("Dashboard", "Demo"),"set3")

    .add(tl3.tweenFromTo("showDashboard", "end"),"set4")
    .add(tlText.tweenFromTo("Demo", "endText"),"set4")

When i use this code i expected the mainTimeline to play the sets in order but for some reason it seems to start with the last set (set4) and then start properly from set1 all the way to set4 and stop like i expect it to.

Maybe i am misunderstanding this. I have all the imgs (iex bmw1 bmw2 etc) opacity set to 0 using css but they instantly appear.

I will try later to create a codepen to replicate this but maybe it is possible to see my error via this code?


EDIT: Added codepen demo


See the Pen ezJVXg by sereal_killer (@sereal_killer) on CodePen

  • Like 1
Link to comment
Share on other sites

hmm, maybe try changing to

.add(tl3.tweenFromTo("showDashboard", "end", {immediateRender:false}),"set4")
.add(tlText.tweenFromTo("Demo", "endText", {immediateRender:false}),"set4")




If that doesn't work, please provide a demo and remove as much of the unnecessary tweens and assets as possible. You could probably replicate the issue with 1 or 2 very simple timelines. thanks!


  • Like 2
Link to comment
Share on other sites

Okay i tried adding the render option to false but that will move up the problem to the previous set being called before set1.

And if i add it to all of them the first set will just repeat.


I have had the time now to create a codepen demo of the problem and added it to the main post. I was hoping to keep the code nicely organized y using multiple timelines but might have to resort to using only 1 for the sake of getting it done.


EDIT: added this section


I did enjoy the video and learned a bit more about the rendering and saving of the properties. But it seems to me that that shouldn't cause the problem as i am targeting different elements.


If there is a better way of doing this i am open to suggestions. I just thought of seperating the two main "slides" and syncing them up using a main timeline was the ideal way of keeping the code organized

  • Like 1
Link to comment
Share on other sites

Thanks so much for the CodePen demo and for reducing it so nicely. Such a big help.



Since you said that mainTimeLine appeared to be doing funny things like playing out of order I removed everything but the first tween.

I noticed that with only 1 tween (from label "one" to label "two") I was seeing the first slide animate twice. strange.


see here: http://codepen.io/GreenSock/pen/oLbdRB?editors=0010


Why is that? Because tlText is not paused and the first tween in mainTimeLine is offset by 2 seconds


.add("set1", "+=2")
  .add(tlText.tweenFromTo("one", "two"), "set1")

So basically tlText is playing on its own before you tween its time in mainTimeLine.


Once you pause tlText everything seems to work as planned.


fixed: http://codepen.io/GreenSock/pen/OXMZGv

  • Like 1
Link to comment
Share on other sites

Thanks i will try this out on monday on the project itself.

I thought it was supposed to autopause when you add them to another timeline. i think i remembered reading that it was unnecessary to pause them.

So why does the delay affect this? is there a way to use a delay in there without needing to pause it?

The whole idea of the delay was because im calling another timeline before that one.


If this is the expected behavior i might default to always adding pause.

I will mark this as solved on monday if it solves my problem in the project. (it should)

thanks again fir the help as this was stumping me for a few days as i had based this on a tutorial which ofcourse didnt have the delay in it.

Link to comment
Share on other sites

Yup, its all working as expected. Consider the following rules of the engine:


1 - A timeline will play upon creation unless it is paused.

2 - If you place that timeline into a parent that is paused, the child will not advance until the parent is played.

3 - If you place your unpaused timeline into an unpaused parent 3 seconds into the future  like

parent.add(myTimeline, "+=3")

myTimeline will not advance until parent gets to time(3).


4 - A timeline will be paused as soon as you run myTimeline.tweenFromTo()


However, in your situation your tweenFromTo() was not called until a time(2) due to the offset. 



parent.add(myTimeline.tweenFromTo("label1", "label1") , "+=2")

is not the same as nesting a child timeline in a parent timeline as described in point 2 above. You are nesting a tween that animates the time() of a timeline.


What you are doing, a delayed tweenFromTo(),  is the only situation that would require that you pause your child timeline upon creation as it will not be automatically paused until the tweenFromTo() actually runs for the first time.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.