Set two animations , same timeline

[Grandes Planos S.A.]

Hello

 

I started recently using gsap , however i'm struggling with 1 question.

 

The basic stuff i want is 1 element get the css 'Left : - 150px' then after 2 seconds the same element will have the css 'top: 60px' the current code i have is this one .

 

 breadTL.fromTo(firstBread , 1.3 , {left: '0'} , {left: '-200'});
    breadTL.fromTo(firstBread , 1.3 , {left: '0' , top: '-100'} , {left: '0' , top:'60'}).delay(1.3);

 

I want the element to slide to left then after 1 second slide in from the top .

 

Something like the user scrolls and the element slides to left (leave screen) and after 1 second appears from top (enter screen).

 

Thanks in advance.

[Carl]

Hi and welcome to the GreenSock forums.

 

It appears your issue is related to how immediateRender works on from() / fromTo() tweens. Its best explained here: 

https://greensock.com/immediateRender

 

Try setting immediateRender:false on the second tween

breadTL.fromTo(firstBread , 1.3 , {left: '0' , top: '-100'} , {left: '0' , top:'60', immediateRender:false}).delay(1.3);

 

Also, regardless of the complexity of your issue, its always best to accompany your questions with a reduced test case as explained here:

 

 

makes it much easier for us to provide accurate help.

 

Thanks!

 

[PointC]

In addition to @Carl's excellent advice, I'd like to add one thing.

 

I see you have a delay() added to the end of the last tween with a value of 1.3. The way you have that written will delay the whole timeline, not just the last tween. That may be your intention, but since the first tween has a duration of 1.3 and the delay you've added is also 1.3, my guess is that you want the second tween to wait until the first has finished.

 

If that is the case, adding delays to tweens isn't necessary with timelines. The tweens will play in sequence unless you change that with the position parameter. 

 

Happy tweening and thanks for joining Club GreenSock.