Control Pause Based on Bézier Coordinates

[GRAY GHOST]

I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice?

 

When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear.

 

Thanks!

See the Pen b290d07abba6d68069171ba6b53383d9 by grayghostvisuals (@grayghostvisuals) on CodePen

[Carl]

Hey Dennis,

 

Sorry, but I've looked at this a few times and I'm really not sure I know where to look in the code or what you need. I suspect the other mods are in a similar boat.if there is any way you can reduce the SVG and js code to the bare minimum of what isn't working I think it would help quite a bit. We would really like to help you.

[OSUblake]

The problem is that it's on a repeating timeline, so it's not stopping, but I'll get back to that later.

 

I just wanted to share a little trick I came up with to find the current value the Bezier plugin is using. Place an index on all the objects in Bezier's array, and then tween a proxy with those values. On the update callback get the index property from the proxy object and round it. You now have the current index of the array. And it doesn't have to be an active tween. You could keep it paused, and then change it's progress when you need to get some value.

 

See the Pen ojxbJX by osublake (@osublake) on CodePen

[GRAY GHOST]

@Carl. Appreciate that Carl. Thanks for jumping in, but I think I was finally able to figure it out tinkering with demo code Blake posted in another thread.

 

@Blake Thanks for that example. Let me know what you think of this solution below since you will recognize the code better. This starts at line 301 in the demo. Essentially as the cycle of an orb finishes it's bezier path it fires the wave signal to the brain using the onComplete event handler. Seems to be doing the job.

tl.to(node, config.duration, { 
  bezier: {
    type: 'thru',
    values: config.bezier
  },
  onComplete: function() {
    fire();
  },
  ease: Linear.easeInOut
});