Animating different properties of a tween in timelineMax?

[chinmay]

I want to sequence an animation with timelineMax.

How is it possible to animate different properties of the same tween with specific delay?

 

E.g.

 

        var blade = $(".intro-blade");
        var logo = $(".intro-logo");
        var photo = $(".intro-photo");
          
        var introAnimation = new TimelineMax();
        introAnimation.to(blade, 1, {height:"400px", ease: Power4.easeOut,autoAlpha:1})        
         
        .to(logo, 1, {x:"-250", ease: Sine.easeOut,autoAlpha:1})
        .to(logo, 1.5, { opacity:1},"+=1.9");

 

From the snippet above, I want to animate Opacity and the transition of 'logo' with specific delay.

like The object will slide in with delayed opacity.

 

)

[ohem]

I think this is what you're looking for: http://greensock.com/position-parameter

[Carl]

Hi and welcome to the GreenSock forums,

 

Like Ohem pointed out I think the position parameter article will help a lot.

 

your code currently

 

 .to(logo, 1, {x:"-250", ease: Sine.easeOut,autoAlpha:1})
        .to(logo, 1.5, { opacity:1},"+=1.9");

doesn't animate the opacity until 1.9 seconds AFTER the logo is done sliding along x axis.

If you want some overlap try

 .to(logo, 1, {x:"-250", ease: Sine.easeOut,autoAlpha:1})
        .to(logo, 1.5, { opacity:1},"-=0.5");

in the code above the opacity will start animating 0.5 seconds BEFORE the x tween is done.

Assuming the opacity of logo starts at 0 you won't see the logo appear until after the x tween has been running for 0.5 seconds though (which may be strange).

 

To get the best assistance, it really helps if you supply a simple CodePen demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

[OSUblake]

It's really not clear what your trying to do because you're also animating autoAlpha, which will animate the opacity to 1 before your second tween even starts.