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!
