Nest timelines with common animate() methods

[bonassus 1 Likes (Newbie)]

I'm trying to understand how to implement a suggestion made in the the Greensocks Documentation.

In The TimelineLite Docs

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

 

It suggestes:

Nest timelines within timelines as deeply as you want. This means you can modularize your code and make it far more efficient. Imagine building your app with common animateIn() and animateOut() methods that return a tween or timeline instance, then you can string things together like myTimeline.add( myObject.animateIn() ).add( myObject.animateOut(), "+=4").add( myObject2.animateIn(), "-=0.5")...

 

 

I'm confused about how that would look.

If one creates a function animateIn(); that creates and returns a new tweenLite instance. and then is called on myObject with myObject.animateIn(); how would myObject be passed to the target property of the tweenLite?

  public function animateIn() :TweenLite
        {
     var myTween:TweenLite = new TweenLite(mc, 1, {x:100}); 
            return myTween;
        }

I might be missing something fundamental about how this should be set up. help will be appreciated.

 

Thanks!

[Carl 9,066 Likes (Superhero)]

Hi and thanks for the question.

 

First in the case of myObject.animateIn(), myObject is not necessarily the target of a tween.

 

Think of slideshow that might have many slides that contain many elements. Each slide (object) might have an animateIn() method that animates many elements (targets).

 

Something more like

slide1.animateIn = function() {
  var tl = new TimelineLite();
       tl.from(header1, 1, {x:200, alpha:0})
       .staggerFrom(bullets, 1, {x:-200, alpha:0}, 0.5)
      return tl;
}


//later add slide1's animateIn timeline to a main timeline:
mainTimeline.add(slide.animateIn());

If you want the animateIn() method to accept some targets, its totally possible to give that method some arguments, something like:

animateIn(header, bullets, footer)

Lastly, I created a tutorial about this very subject awhile ago. 

http://www.snorkl.tv/2011/05/real-world-benefits-of-oop-with-as3-for-the-completely-terrified-greensock-homepage-animation-case-study/

 

Although it uses the older v11 Timeline syntax, the general concepts are the same and I think the video and source files will prove very helpful.

 

Let me know if you need more help.

[bonassus 1 Likes (Newbie)]

Thanks,

 

for the resopnce Carl!

 

I actualy just got there on my own.

 

The animateIn() function is a method defined in object1 that returns a tweenLite instance.

public function animateOut() :TweenLite{
        
            return TweenLite.to(_content, .3, {y:100});
        }

wich you can add to your timeline

 tl = new TimelineMax({paused:true});
            tl.add([object1.animateIn(), object2.animateIn(), object3.animateIn()], 0, "sequence", -.2);

Duh.

 

I like your use of inline function to generate the tweenlite object. thats for sharing that.

 

I think im on the right track now.

 

Also thanks for the link to the video, i will watch it now as i am sometimes oop terrified.

 

B