Jump to content


Control Pause Based on Bézier Coordinates

Go to solution Solved by GRAY GHOST,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.



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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • Solution

@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() {
  ease: Linear.easeInOut
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.