Jump to content
Search Community

insertMultiple tweens fire at start and are not part of timeline

BarryS test
Moderator Tag

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

Hello guys,

 

Sorry to post yet again with something that is probably really simple, but I'm stuck again.

 

In my code below I used insertMultiple to start two tweens at the same time, but they do not run in sequence in the Timeline. I had expected them to run after the first tween in the timeline had complete.

 

 

var tl = new TimelineMax({onComplete:runHighlights});
tl.to(FirstImage, 1, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeOut});
tl.insertMultiple([new TweenMax(GreyBlock, 0.3, {css:{height:"400px", autoAlpha:1}, ease:Power2.easeOut}),
			   new TweenMax(GreyBlock2, 0.3, {css:{width:"952px", autoAlpha:1}, ease:Power2.easeOut})]);
tl.to(SecondImage, 1, {css:{left:"830px", autoAlpha:1}, ease:Power2.easeOut});
tl.to(FrontPageText, 0.5, {css:{autoAlpha:1}, ease:Power2.easeOut});
tl.to(BottomNav, 0.5, {css:{top:"485px", autoAlpha:1}, ease:Power2.easeOut});

 

Originally, i had set each tween individually and used delays, but wanted to use a timeline to take advantage of the onComplere callback.

 

 

Thanks in advance,

 

Barry

Link to comment
Share on other sites

Ooops, just realised that I can fix it with delay, like so.

 

tl.insertMultiple([new TweenMax(GreyBlock, 0.3, {css:{height:"400px", autoAlpha:1}, delay:1, ease:Power2.easeInOut}),
			   new TweenMax(GreyBlock2, 0.3, {css:{width:"952px", autoAlpha:1}, delay:1, ease:Power2.easeInOut}),
   ]);

Link to comment
Share on other sites

According to the API, insertMultiple is defined as:

insertMultiple(tweens:Array, timeOrLabel:* = 0, align:String = normal, stagger:Number = 0)

insert and insertMultiple are intended to add tweens at exact times or labels (e.g. add tween at exactly 3 seconds into the timeline regardless of its current length), as opposed to append and appendMultiple, which add tweens at the current end of the timeline.

 

In your code you have only provided the array of tweens to insertMultiple, leaving off the timeOrLabel parameter. In this case it defaults to 0 and inserts the tween at the start of the timeline.

 

You could try

tl.insertMultiple([
new TweenMax(GreyBlock, 0.3, {css:{height:"400px", autoAlpha:1}, ease:Power2.easeInOut}),
new TweenMax(GreyBlock2, 0.3, {css:{width:"952px", autoAlpha:1}, ease:Power2.easeInOut}),
], 1); // inserts the tweens at 1 second into the timeline

// or

tl.appendMultiple([
new TweenMax(GreyBlock, 0.3, {css:{height:"400px", autoAlpha:1}, ease:Power2.easeInOut}),
new TweenMax(GreyBlock2, 0.3, {css:{width:"952px", autoAlpha:1}, ease:Power2.easeInOut}),
]); // appends the tweens to the end of the timeline

  • Like 2
Link to comment
Share on other sites

Thanks Jamie.

 

The appendMultiple is what I needed as it inserts the tween inbetween the other tweens either side in the timeline. I had gotten confused by the terminology.

 

Although I have been working with javascipt and jQuery for a while now, I still get confused when reading some APIs.

 

You worked out what was wrong by reading the API and understanding the code below.

 

insertMultiple(tweens:Array, timeOrLabel:* = 0, align:String = normal, stagger:Number = 0)

 

I however, even find that confusing!

 

Thanks again.

Link to comment
Share on other sites

First off, Jamie, thanks so much for all the effort in helping others in these forums. It is great to see such participation among the GreenSock community members.

 

Barry,

 

We are constantly working on new ways of making TimelineLite and the whole platform easier to understand for newcomers. TimelineLite is a very powerful and flexible tool and as such there are many options and features available that take some time to get comfortable with.

 

I know for myself, it sometimes takes reading and seeing something multiple times before it really clicks. When learning TimelineLite I found studying the various interactive demos and explanations on http://www.greensock.com/timelinelite, http://www.greensock.com/timelinemax combined with a deep study of the docs really helpful. Also just reading these forums daily was huge.

 

Perhaps the explanations of insert vs append will make more sense when reading them here:

http://active.tutsplus.com/tutorials/animation/timelinelite-ultimate-starter-guide-basic-methods-and-properties/

 

Hang in there. The training resources we have planned for v12 are really going to be something else.

 

Don't hesitate to ask questions. We love to help.

 

-Carl

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

Hello.. If you are using the latest GSAP version..

 

I believe you are looking to use the add() method.

 

add():
Adds a tween, timeline, callback, or label (or an array of them) to the timeline.

 

Example of add() usage:

 //add a tween to the end of the timeline
 tl.add( TweenLite.to(element, 2, {left:100}) );
 
 //add a callback at 1.5 seconds
 tl.add(func, 1.5); 
 
 //add a label 2 seconds after the end of the timeline (with a gap of 2 seconds)
 tl.add("myLabel", "+=2");
 
 //add another timeline at "myLabel"
 tl.add(otherTimeline, "myLabel"); 
 
 //add an array of tweens 2 seconds after "myLabel"
 tl.add([tween1, tween2, tween3], "myLabel+=2"); 
 
 //add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline
 tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5);

http://api.greensock.com/js/com/greensock/TimelineLite.html#add()

http://api.greensock.com/js/com/greensock/TimelineLite.html#add()

 

http://api.greensock.com/js/com/greensock/TimelineLite.html

http://api.greensock.com/js/com/greensock/TimelineMax.html

 

Hope this helps! :)

  • Like 3
Link to comment
Share on other sites

Yes there was an API change in January that introduced the add() function and improved the way position parameters work.

 

Since append(), insert(), insertMultiple() and appendMultiple() can all be achieved with the add() function now, they were marked as deprecated and eventually removed from the API (they will still work so that legacy code isn't outright killed, but they are no longer recommended for use).

  • Like 5
Link to comment
Share on other sites

Excellent! Thank you both for the examples as well as the link to the changelist. I'm working on adding functions that are run to progressively draw a path (using Snap.svg but shouldn't be specific to the issue I'm having --I believe, correct me if I'm wrong--) and then chaining them (with or without a delay in some cases). I've built this in a "native" fashion, and now I'm trying to accomplish the same thing with TimelineLite.

 

Here's a fiddle with my native approach using callbacks and setTimeout for the delays: http://jsfiddle.net/anthonygreco/j23E3/ and here's where I'm trying to use TimelineLite: http://jsfiddle.net/anthonygreco/V38fR/

 

Anyone have any thoughts on what I may be missing here?

 

Edit: Upon further fiddling it looks like I just need to be able to pass parameters which I can do by wrapping the animatePath method with the parameters in an anonymous function. Unless anyone has any other suggestions on passing parameters for a method that's added to a timeline. I'll update this again with a new jsfiddle once I have it all hashed out.

 

Edit: So that totally works, but it seems I've lost the delay aspect of the timeline. Here's a new fiddle: http://jsfiddle.net/anthonygreco/m937Y/

 

Edit: Sorry for the multi-edits. It looks like I can set delays absolutely, but relative delays don't work. But this makes things a bit less manageable, as the fiddle is merely a proof-of-concept for a larger more complex animation. Fiddle with absolutes: http://jsfiddle.net/anthonygreco/BYrLN/

Link to comment
Share on other sites

Looks like both absolute and relative positions were working as expected, but you changed the values between the two:

 

relative was 0 and 2, and since functions take 0 time, they were inserted at 0 and 2

absolute was 0 and 4, inserted at 0 and 4

 

If the relative positions were 0 and 4 they would have been identical.

Link to comment
Share on other sites

The thing is you were getting the relative tween 2 seconds after the previous animation. Your two samples have different values:
m937Y uses "+=0" and "+=2"
BYrLN uses 0 and 4
 
With just two tweens added relatively or absolutely at 0 and 4, both would both be identical. To make it clearer, I'll try some ASCII drawings because I really don't like MSPaint...

// ABSOLUTE

timeline.add(foo, 0); // A - inserted at 0

A
0

timeline.add(foo, 4); // B - inserted at 4

A                                       B
0---------1---------2---------3---------4
// RELATIVE

timeline.add(foo, "+=0"); // A - appended 0 seconds from the end of the
// timeline, which is 0. duration is unchanged since foo has no length

A
0

timeline.add(foo, "+=4"); // B - appended 4 seconds from the end of the
// timeline, which was still duration=0

A                                       B
0---------1---------2---------3---------4

There's no immediate difference if the first insert is at 0. If the values were different, let's say 2 and 4, you would get different timelines using absolute and relative:
 

// ABSOLUTE

timeline.add(foo, 2); // A
timeline.add(foo, 4); // B

                    A                   B
0---------1---------2---------3---------4
// RELATIVE

timeline.add(foo, "+=2"); // A
timeline.add(foo, "+=4"); // B

                    A                                       B
0---------1---------2---------3---------4---------5---------6
  • Like 4
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.
×
×
  • Create New...