Jump to content

Mr Pablo

TimelineMax and sequencing

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 am trying to get multiple timelines to play in sequence.


I have created some timelines (TimelineMax) and added them to an array.


I then created a "master" timeline (set to paused and repeat -1) ad added the array using:

masterTimeline.add(timelineArray, "+=0", "sequence");

And it simply doesn't work.


(something similar to this did work in a previous file, where I was using TweenMax, but I have since changed to TimelineMax, which uses TweenMax, right?)


If I just add the array, and don't add in the other options, the animations play, but at the same time! (I inspected the DOM and can see the assets tweening simultaneously).



See the Pen fqdLs by mr_pablo (@mr_pablo) on CodePen


Link to comment
Share on other sites



I've looked at your code.

Its quite a lot to work with. A reduced test case would be helpful, or perhaps set it up so that assets that are animating aren't being hidden by other assets.


Anyway, I managed to get a little understanding of what is going on but will have to look at it more later

  • Like 1
Link to comment
Share on other sites

ok, in a nutshell, the problem was that timelineArr was cumulatively storing all the tweens from all previous iterations of your objectsArray loop.


Below is a demo of your code working with 

 masterTimeline.add(objectTimelineArr, "+=0", "sequence");



You'll see that the objects in objectArray[0] animate before (and behind) the objects in objectArray




here is a reduced test case which might be more clear for some to understand:http://codepen.io/GreenSock/pen/ayDhl


I really don't think for what you are trying to accomplish you need to be making so many arrays of timelines and such. I'll post back if I find a way to reduce it more.

  • Like 1
Link to comment
Share on other sites

Yes, it gets a tad complex with the nested timelines.


I can get it to a point where the timelines are playing in the correct order, but I am having trouble with hiding and showing the assets (one of my previous topics was about this as well, but the solutions discussed didn't in this situation!)


I need the assets for all objects to be hidden then made visible when the object time line they belong to is bring played. Using set() gives flaky results (again discussed previously, apparently the operation order changes after the first play?)


Using onStart and onComplete functions got me in a total mess but is possibly the way to go?


I still think the sequence alignment is broken/not working properly in my case.


I don't think I'll be able to do a reduced case until much later today!

  • Like 1
Link to comment
Share on other sites

Ah awesome!


Your 'pen: 

See the Pen Ecrfb by GreenSock (@GreenSock) on CodePen

is looking good!


Do you have any ideas on how to sort out the whole hidden/visible issue?


All assets need to be hidden, then Object 0's assets need to be shown when it plays, then hidden on complete, then the same for Object 1.


I got stuck trying to use a .set() and the onStart/onComplete methods. Pretty sure I was setting things in the wrong order etc.

Link to comment
Share on other sites

The trick is to use set() prior to creating the timelines to hide everything and then add a set() at the beginning of each timeline to show things.


Using this technique its important that the set() in the timeline  that reveals things has immediateRender:false


Also, in my previous example, creating multiple timelines for each element is not the same as having multiple timelines for each element in an array of elements. 


Here is something a bit closer to what you are doing and every element is hidden until it is animated and hidden after it is done animating:



  • Like 2
Link to comment
Share on other sites

I have implemented your latest codepen code into my master file. I removed the arrays and the animations seems to play in the correct sequence with the correct timing.


I am having a few issues though.


One of my assets in the first animation is no longer tweening. It is meant to tween from opacity 0 to 1 over a few seconds. Now it just "blinks" on.


Other transitions (rotation, x, y etc) seem fine.


Also, the timing's don't seem to match. I had made it so originally an asset had a delay that was from the start of the animation, now it looks like the delay is from the end of the previous asset tween.


See the Pen mabrk by mr_pablo (@mr_pablo) on CodePen


EDIT - I changed the codepen a bit, adding in some "0" times on the .add()'s seems to knock the timings back into shape, but as you can see, the one image, which should transition from 0 to 1 opacity, is just, there! Very odd.

Link to comment
Share on other sites

Hmm, it *kind* of works. The assets seems to be tweening correctly, but they initially appear on the screen with opacity 1 and visible.


(I changed the time form 0 to 1 on the timeline.to() method)

Link to comment
Share on other sites

It sounds like your DOM elements are showing up instantaneously prior to your tweens kicking in. In this case just give your elements or parents of your elements visibility:hidden.


In my example i handle it like so:

.wrapper div {

Then whenever you set autoAlpha:1 or tween from() autoAlpha:0, the visibility will be toggled to "visibile".



  • Like 1
Link to comment
Share on other sites

I tried adding in that initial CSS, but it doesn't work, the problem assets are still playing up. It's odd, as they should have 0 opacity from the beginning....


See the Pen mabrk by mr_pablo (@mr_pablo) on CodePen

Link to comment
Share on other sites

if you set immediateRender:false to your other set, it seems to work:


timeline.set($('#asset_' + d.type + '_' + d.id), {
                        backgroundImage: "url('"+ d.src +"')",
                        height: d.transitions[0].height + "px",
                        position: "absolute",
                        opacity: parseInt(d.transitions[0].opacity),
                        width: d.transitions[0].width + "px",
                        scaleX: d.transitions[0].scaleX,
                        scaleY: d.transitions[0].scaleY,
                        rotation: parseInt(d.transitions[0].angle),
                        x: x,
                        y: y,
                      transformOrigin: transform, immediateRender:false
                    } );
it seems like you have multiple sets happening at the same time. Again, your example unfortunately is extremely difficult to follow with all the loops and dynamic tween creation. Its tough to narrow these things down in such a context. 
  • Like 1
Link to comment
Share on other sites

Aha that seems to do the job!


Yes, it is very complex, but it gets the job done!

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.