I think I might need to add some additional context. Here's the whole timeline array:
timeline.insertMultiple(
[
'charging',
function ()
{
wave
.attr('fill', 'white')
.attr('fill-opacity', 0.4)
.attr('stroke-opacity', 0.3)
.show();
},
TweenLite.fromTo(wave, 0.5, {
raphael: {
r: 1,
'stroke-width': 1
}
}, {
ease: Linear.easeNone,
raphael: {
r: MAX_R,
'stroke-width': 5
}
}),
function () {charge.show();},
'charged',
TweenLite.fromTo(charge, 0.5, {
raphael: {
r: 1,
'fill-opacity': 0.8
}
}, {
ease: Linear.easeNone,
raphael: {
r: MAX_R,
'fill-opacity': 0.05
}
}),
function () {timeline.play('charged')},
'discharge',
function () {charge.hide();},
TweenLite.to(wave, 0.25, {
ease: Linear.easeNone,
raphael: {
r: 1,
'fill-opacity': 0,
'stroke-width': 1
}
}),
'pulse',
(pulse = TweenLite.fromTo(wave, 0.15, {
raphael: {
r: 1,
'stroke-width': 1,
'stroke-opacity': 0.3
},
}, {
ease: Linear.easeNone,
raphael: {
r: 1000,
'stroke-width': 100,
'stroke-opacity': 0.1
}
})),
function ()
{
charge.hide();
wave.hide();
pulse_x = -1;
pulse_y = -1;
}
], 0, 'sequence', 0);
A mouse event starts the animation with timeline.play('charging'). Right after the charging label, there is a function which does execute. The animation continues until the function right before the discharge label. This function loops the animation indefinately until another mouse event runs timeline.play('discharge'). That's where the function call gets skipped.
I tried timeline.play('discharge', false), but then the looping part just kept going. I'm going to keep experimenting but wanted to know if there was anything obviously wrong with how I built the timeline that would case the problem I'm experiencing.