[Object tweens simultaneously / chain events]

Thanks Carl and PointC for your great help. I will have a closer look at your code and the videos you posted.

[Object tweens simultaneously / chain events]

Hi everyone,

 

I am new to using GSAP, but have used (the timeline) in Flash heavily. I've read the documentation and tried to follow it.

 

For my first project using GSAP, I built a small banner ad to test some of the functionalities. It can be seen here: 

 

As for now, I have some questions about my code:

 

 

1. (How) can I chain the .set into one large string (so that they are all set at once)?

   For example: 

TweenLite.set("#box", {x:52, y:57}).set("#shadow", {x:127, y:52, autoAlpha:0});

Is this even possible?

 

 

 

2. I would like to move the #box, #shadow, #pack and #line simultaneously to the left, but in the code provided the animations start when the one before is finished... How can I fix this? Is it possible to be chained as well?

        tl.to("#box", .5, {x:-25, y: 62, scale: 0.72, rotation:0.001, ease:Power2.easeInOut});
        tl.to("#shadow", .5, {x:55, y: 58, scale: 0.72, rotation:0.001, ease:Power2.easeInOut});
        tl.to("#pack", .5, {x:70, y: 76, scale: 0.72, rotation:0.001, ease:Power2.easeInOut});
        tl.to("#line", .5, {x:-10, y: 170, scale: 0.72, rotation:0.001, ease:Power2.easeInOut});

3. If you have any other remarks, tips, optimisations or observations about my code, don't hesitate to give me a heads up!

 

 

Thanks in advance for all your (kind) help!

See the Pen bEBxBB by anon (@anon) on CodePen