Animation in groups

[DivisionBoy]

Hi!

Tell me, is it possible to make animation in groups(MovieClip), as is done in the editor Flash Pro?

It should be something like a "MovieClip", which is located inside the other "MovieClip".
As I understand it, in GSAP, TimelineLite must be in the TimelineLite, it will be the same as the "MovieClip" in the "MovieClip"?

I made a video example of what we would like to achieve.

 

 

How would it look in GSAP?

[Carl]

Thanks for the video. The basic answer is yes, you can absolutely nest animations like that.

Before providing more details, can you please let us know if you are working with AS3 or JavaScript?

 

Since you are referencing MovieClips, I'm assuming AS3 but you posted in the HTML5/JS forums so I'm not really sure. 

 

Thanks

[ohem]

In HTML, a div can be used to group/contain multiple elements, the same way a movie clip works in Flash.  You can animate a div ID or div class using GSAP, the same way you would do with an instance name in Flash.  

 

You can nest divs inside other divs just like movie clips, too.

[DivisionBoy]

I'm working with JS.

MovieClip I mentioned for example. I expect that TimelineLite, this kind of "MovieClip".

 

Interested in response ohem, it's really the right approach to use for this div containers?

If possible, it can be any simple example with div containers?

[Carl]

Ohem is correct. TimelineLite and TimelineMax work exactly the same way in ActionScript and JavaScript: they contain tweens which animate the properties of objects. 

 

In Flash those objects are display objects or display object containers, most commonly MovieClips, Sprites, TextFields, etc. 

In JavaScript / HTML5 those objects are DOM elements most commonly <div> or <h1>, <img>, <svg>, <rect> etc.

 

Just like you can nest a MovieClip symbol inside another MovieClips symbol. With HTML you can nest one div inside another. Spin the parent div and the child divs spin as well.

 

<div class="container">
  <div class="box"></div>
  <div class="box" style="left:101px;"></div>
  <div class="box" style="top:101px;"></div>
  <div class="box" style="left:101px; top:101px"></div>
</div>

var tl = new TimelineMax({repeat:-1, repeatDelay:0.5, yoyo:true});

tl.staggerFrom(".box", 0.3, {scale:0}, 0.2)
  .to(".container", 1, {rotation:360, scale:0.5})
  .to(".container", 0.2, {x:300})
  .to(".container", 1, {scale:1}, "grow")
  .staggerTo(".box", 0.3, {scale:0}, 0.2, "grow")

http://codepen.io/GreenSock/pen/VLoEKZ?editors=001

[Carl]

Keep in mind you can also nest timelines inside of timelines.

This way you can make modular animations and glue them together and control the entire sequence as a whole.

 

Timelines are merely objects that contain instructions about what should be animated and when and there is no correlation to how your elements are nested inside each other (works the same in AS and JS).

 

Here is a very basic example that takes 2 timelines and adds them to a parent timeline (main). 

 

 

var main = new TimelineMax();


var titleTimeline = new TimelineLite();
titleTimeline.to("h1", 0.2, {x:100})
  .to("h1", 0.5, {color:"red"})


var boxesTimeline = new TimelineLite();
boxesTimeline.staggerFrom(".box", 0.3, {scale:0}, 0.2)
  .to(".container", 1, {rotation:360, scale:0.5, opacity:0})


//add both timelines to main so we can play them in sequence, reverse them, pause them and control them any way we want
main.add(titleTimeline)
main.add(boxesTimeline)


//restart the main timeline
$("#restart").click(function(){
  main.restart();
})

 

http://codepen.io/GreenSock/pen/MwNPEX?editors=001

[DivisionBoy]

Wow, thank you!