Jump to content


Timeline nesting issue. Timeline to start/visible when previous completes

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

I'm having trouble sequencing multiple timelines.


I don't want the the second timeline (NUM6Timeline) to be visible till layer 1 has complete.  

I need to do this on 6 timelines but have just included 2 timelines in this codepen. ideally I would also like to fade out  timeline1 before the next happens.


When I try with 6 I get in a right mess and not having much luck with 2 either.. any help would be much appreciated.


I've noticed i also lose the the ease on the second timeline (NUM6Time) so the animation loses its gradual build up 





See the Pen BQQBya by Ryan84 (@Ryan84) on CodePen

Link to comment
Share on other sites

Try to use a naming convention for your elements that can used in a loop, similar to what I did in this post...



Once you have that, you should be create everything using some type of loop. Here's a post that shows how to do something similar to what you're trying. You don't have to use that reduce method like I did. A jquery each call would work just as well.


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