Jump to content

Ben O

  • Posts

  • Joined

  • Last visited


0 Newbie
  1. Yep, I think you're right. The staggering that I added seems to fix any ambiguity by spacing things out a bit.
  2. When I try that, it got stuck in the looping again. My issue seems to be that there are 3 zero length animation clumped together. Trying to set the playhead just before discharge causes it to be before the function that loops: function () {timeline.play('charged')}, 'discharge', function () {console.log(1); charge.hide();}, I found another solution that keeps my original timeline intact. I staggered the whole timeline by 0.001 seconds with the insertMultiple call: ... ], 0, 'sequence', 0.001); Now, I can call timeline.play('discharge') and the function is getting called.
  3. Well, I got it to work by pushing everything after the discharge label into a nested timeline: ... 'discharge', new TimelineLite({ align: 'sequence', tweens: [ function () {console.log(1); charge.hide();}, TweenLite.to(wave, 0.25, { ease: Linear.easeNone, raphael: { r: 1, 'fill-opacity': 0, 'stroke-width': 1 } }), ... I considered doing this anyways to group each part, however, it would be nice if the other method worked as expected too.
  4. 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.
  5. Below is a snippet of part of a timeline I building using TimelineLite. There are parts before and after this sequence but this one part is giving me some trouble: timeline.insertMultiple( [ 'discharge', function () {charge.hide();}, TweenLite.to(wave, 0.25, { ease: Linear.easeNone, raphael: { r: 1, 'fill-opacity': 0, 'stroke-width': 1 } }), ], 0, 'sequence', 0); If I call timeline.play('discharge'), the function is not called - only the tween runs. I have functions in the timeline in other places but they are always after the animation and run as expected. The only way I could get this to work was to move the function to the onStart callback of the animation: timeline.insertMultiple( [ 'discharge', TweenLite.to(wave, 0.25, { ease: Linear.easeNone, raphael: { r: 1, 'fill-opacity': 0, 'stroke-width': 1 }, onStart: function () {charge.hide();} }), ], 0, 'sequence', 0); Is there something I'm missing to make this work. My first thought was that I'm adding two 0 duration items to the timeline and the playback is just starting at the first item with a real duration. I don't mind using the onStart callback but I was trying to see how flat I could keep this so I can see the sequencing of the all the processing in a consistent fashion. If anyone has ideas/alternatives, I'd be interested in your thoughts. I can provide a link to the full source and/or working demo if needed.