How to simultaneously tween two objects in TimeLineMax?

[Chrysto]

HI;

 

I need to make the following animation using JS GS v12 . I have a rectangular banner with sliding background and I want to make

 

1) two images fade in

2) the simsimultaneously slide up

3) background slide up

4) two pics slide simultaneously from down to up

5) background slide up

5) these two pics simultaneously slide up

...etc

 

The problem is that the two pics I want to slide don't share same parent ( my HTML markup is like )

 

<div id="banner">

  <!-- First slide -->
  <h1 id="bf_intro_text">First slide text</h1> 
  <div id="bf_ball"></div>

  <!-- Second slide -->
  <h1 id="bf_message_text">Message</h1>
  <div id="bf_bookie_shirt">
   <p>text1</p>
  </div>
  <div id="bf_betfair_shirt">
   <p>text2</p>
  </div>

  <!-- Third slide -->
  <h1 id="bf_final_text">Final text</h1>
  <div id="bf_button"><p>Button</p></div>
  <div id="bf_logo"></div>

 </div>

 

 

I made it till one time:

 

var bannerAnim = new TimelineMax({repeat:anim_repeat, repeatDelay:3});
  bannerAnim
  .from($introText, 0.7, {css:{autoAlpha:0}, delay:0.1})
  .from($ball, 0.7, {css:{autoAlpha:0}, delay:0.2} )
  .insert(new TweenMax.to($banner, 0.6, {css:{backgroundPosition : "0px -90px"}, delay:3}), 0) 
  .insert(new TweenMax.to($introText, 0.8, {css:{marginTop : "-90px"}, delay:2}), 0) 
  .insert(new TweenMax.to($ball, 0.8, {css:{marginTop : "-90px"}, delay:2}), 0)   

 

but I have problem appending the TimeLineMax do two tweens simultaneously. Can somebody help me how to simultaneously tween two objects in TimeLineMax?

 

Thank in advance, Ico

[Carl]

to directly answer the question of

 

Can somebody help me how to simultaneously tween two objects in TimeLineMax?

 

Each tween can have multiple targets. Previously you would need to use insertMultiple() or appendMultiple() to add more than one tween at the same time. If you need to perform the same tween on multiple objects simply pass in an array of objects [$image1, $image2]

 

//insert 2 tweens at time of 2 seconds
banner.insert(TweenMax.to( [$image1, $image2], 0.8, {css:{marginTop : "-90px"}}), 2) 

 

if your simultaneous tweens have different targets with different properties that are being tweened (image moves up, text moves down) you can have them start at the same time using insertMultiple() or appendMultiple().

 

Also, note that insert(), append(), appendMultiple and insertMultiple() allow you very specifically manage where your tweens are added to the timeline without needing to set a delay property in each tween. For appends you can just use the offset parameter. The insert methods allow you to specify an exact time or label.