Jump to content
Search Community

delay with TimelineMax

celli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Adding hardcoded delays like the code you post might be a good idea for an extremely simple set of timelines. Sure if you got just two timelines is as simple as pie. But the more timelines you got in your project the complex it gets, because you have to manually set all the delays for all the timelines that need one.

 

The best recommended practice is, no matter how simple your project is, nest your timelines into a parent one, create labels and set their positions either relative to the previous instance or a label, or absolutely based on the parent timeline's time.

var master = new TimelineMax(),
    tl1 = new TimelineLite(),
    tl2 = new TimelineLite();

master
  .add(tl1)
  .add(tl2)//add tl2 right after tl1, tl2 will play as soon as tl1 is completed

//another choice
master
  .add(tl1)
  .add(tl2, "+=1")//add tl2 1 second after tl1, tl2 will play 1 second after tl1 is completed

//using labels
master
  .add(tl1)
  .add("label1")
  .add(tl2, "label1+=1")//add tl2 1 second after label1, tl2 will play 1 second after "label1"

Just yesterday Carl posted a new entry in GreenSock's blog about this:

 

http://greensock.com/position-parameter

 

Also check this video tutorial Carl made some time ago:

 

http://greensock.com/position-parameter

 

Rodrigo.

  • Like 3
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...