Jump to content
GreenSock

kaplan

Add object-oriented tween to timeline, then play that tween?

Go to solution Solved by Diaco,

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

Hi,

 

I was reading about making object-oriented (oo) tweens in the TweenMax doc and I see that it plays automatically when it's created unless I add paused:true. I get it, then I can do tween.play() to run it. 

var tween1 = new TweenMax(myObject, 2, {width:200, height:150, paused:true});

I think what I'm wanting to do, and this might be the wrong way to go about it, is setup some tweens in this oo approach and add them to a TimelineLite object, but if I don't pause the tweens they run right away and if I add them I need to start the individual tweens.

 //add an array of tweens 2 seconds after "myLabel"
 tl.add([tween1, tween2, tween3], "myLabel+=2"); 

Asking in another way: If I'm adding tweens to a timeline that are oo created tweens, how do keep them from playing during the creation and then playing when I need them to in the timeline?

 

Thanks!

Link to comment
Share on other sites

  • Solution

Hi kaplan  :)

 

pls make a reduced Codepen Demo available  .

 

every thing works correctly as expected and tweens play in order of timeline timing

 

pls check this out : 

See the Pen RWqqwj by MAW (@MAW) on CodePen

 

.add() method doc : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

  • Like 1
Link to comment
Share on other sites

Thanks Diaco,

 

I made a pen and played around. I was imagining making tween objects (outside the timeline) then adding them into a sqeuence. I see now if I make those outside the timeline then add them they won't play until the timeline runs them.

 

Here's my codepen: 

See the Pen MazZWJ by kaplan (@kaplan) on CodePen

 

The 3 tweens are made with new, then they get adde to a timeline after another tween and they don't run until the playhead hits them. It looks like if they're not paused and not 'add'ed they just run, ah... that's the object-oriented tween that must be a default of to

Link to comment
Share on other sites

Just so there's no confusion... there is no difference in a tween using "new" and one using TweenMax.to(). They are the exact thing. This is what the code looks like.

TweenMax.to = function(target, duration, vars) {
  return new TweenMax(target, duration, vars);
};
  • Like 3
Link to comment
Share on other sites

Also, if you're creating a bunch of tweens and then adding them to a timeline, you can simply pause the timeline and none of them will run (no need to pause each tween...in fact, that'd be bad because you'd have to un-pause each one in order for them to play properly inside the timeline). 

 

The only way a tween (or timeline) plays is when its parent timeline's playhead drags across it. The root timeline's playhead is always moving. Once you get the concept, it's super powerful and actually quite simple. Anyway, that's why you can just pause the parent timeline and then none of the child tweens will play. 

  • Like 3
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.
×