Jump to content
Search Community

Correct way to sync multiple animations

Dimitris Sarmis test
Moderator Tag

Recommended Posts

Hello everyone, I am new to GSAP and i wanted to ask the proper way to sync animations. In my project, all elements are created dynamically. All the elements are lists of 5 to 20 items and all of them have a pagination effect with staggering. I start hiding the items(hideThisPage), then i fadeIn the next page of items(showNextPage). The result is that the pagination effect (because of the staggering and the different amoun of items) does not lasts the same. So i am thinking of creating a timeline in each of the elements, and immediately pausing it. Then i will create a "master" element that will be the main timeline and it will add all the elements timeline to it at the position 0. 

Is this way the correct one? 

I am a bit confused about timelines because i do understand that it is powerful in sequencing animations, but i am not sure of the proper way to "initialize" an animation but do not start it yet. 

Apart from the Docs, is there any nice, recent book/tutorial you suggest about GSAP?

Link to comment
Share on other sites

Hey Dimitris and welcome to the GreenSock forums!

 

5 hours ago, Dimitris Sarmis said:

i am thinking of creating a timeline in each of the elements, and immediately pausing it. Then i will create a "master" element that will be the main timeline and it will add all the elements timeline to it at the position 0. Is this way the correct one? 

Sounds like the way to do it to me :) 

 

5 hours ago, Dimitris Sarmis said:

i am not sure of the proper way to "initialize" an animation but do not start it yet. 

How to do this depends on your setup. Probably the best way is to have a timeline and pause it. But if it's part of a sequence that should be paused, you could use .addPause() or add a label and tween to that label (instead of just playing it normally). 

 

5 hours ago, Dimitris Sarmis said:

Apart from the Docs, is there any nice, recent book/tutorial you suggest about GSAP?

@Carl has made several mini courses covering different aspects of using GSAP. You can get access to all of his content for only $1.99 right now!

 

Our learning section is also a good place to learn.

  • Like 5
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.
×
×
  • Create New...