Jump to content
Search Community

Multiple timelines error

JohnnyW 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

I have a timeline which I need to jump around a few times, in the following way:

 

1 x Start

3 x Middle section

1 x End

 

So the Start animation plays once, and leads into the Middle section which is repeated 3 times, and then finally the End animation plays once and the whole thing finishes.

 

I'm not quite sure how GSAP wants me to handle such a situation. I made three timelines, and placed an onComplete in Start, calling Middle -- which loops three times, and then called an onComplete for End. Unfortunately GSAP doesn't seem to like me creating three timelines.

var TLend = TimelineMax({
    repeat: 0,
    paused: true,
    defaultEase: Power4.easeInOut
});

var TLmiddle = new TimelineMax({
    repeat: 2,
    paused: true,
    pauseDelay: 3,
    defaultEase: Power4.easeInOut,
    onComplete: function() {
        TLend.play()
    }
});

var TLstart = new TimelineMax({
    repeat: 0,
    paused: true,
    defaultEase: Power4.easeInOut,
    onComplete: function() {
        TLmiddle.play()
    }
});

If I do this, I get a weird error:

tweenmax…_min.js:16 Uncaught TypeError: Cannot set property 'vars' of undefined

I assume that GSAP wants me to work in a different way (perhaps using pause() and resume()?). What's the best way to achieve what I want in GSAP? Thanks!

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...