[Multiple timelines error]

Doh. A simple typo! (I missed "new" before TimelineMax.) Everything works as expected now.

[Multiple timelines error]

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!