Jump to content


how to make an animation for several elements at once

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites



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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.