how to make an animation for several elements at once

[AlexanderGS]

I'm trying to make a timeline animation. I want the text and the image to be animated at the same time. I thought about setting the timeline separately for the image. But that breaks the whole animation chain. And the content disappears and falls to the very bottom.
Could you please explain how such animation is done?
Here is my example

See the Pen BaORxVe by Alexxxsander (@Alexxxsander) on CodePen

[Cassie]

Heya!

 

So you'll want to use the position parameter to make the animations on the timeline occur at the same time.

See the Pen OJomEwX?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Another tip - you were right with your second to use yPercent on one of your tweens, rather than transform: 'translateY(100%)'
It's always best for performance to use the shortcuts GSAP provides, e.g. yPercent, y, x, xPercent and rotation rather than targeting transforms directly.

I also tend to 'set' initial properties in tweens outside of the timeline, but I guess that's more down to personal preference.

Hope the edit helps.