How to animate 2 or more elements at the same time using GreenSock?

Question

I'd like to animate two different elements at once using Green Sock. How do I modify the below code so that they execute the exact animation at the same time and not one after another?

tlProject = new TimelineMax({});    

tlProject.from($animated_bowl, 2, {opacity: 0, scale: 0, ease: Bounce.easeOut})
    .from($animated_bowl_shadow, 2, {opacity: 0, scale: 0, ease: Bounce.easeOut});

Thanks!

Answer 1

The .from(), .to() and .fromTo() methods of TimelineMax can take an additional position parameter that can control the placement of your tweens.

For your specific case, you only need to tell each tween to start at 0 (zero).

tlProject = new TimelineMax();
tlProject.from($animated_bowl, 2, {opacity: 0, scale: 0, ease: Bounce.easeOut}, 0)
    .from($animated_bowl_shadow, 2, {opacity: 0, scale: 0, ease: Bounce.easeOut}, 0);

Check out this awesome tutorial to get a better understanding of how the position parameter works and all that you can do with it: https://greensock.com/position-parameter.

Another option is to pass both elements at once, as the target

tlProject = new TimelineMax();
tlProject.from([$animated_bowl, $animated_bowl_shadow], 2, {opacity: 0, scale: 0, ease: Bounce.easeOut});