Synchronising gui.animate()

Hey, I have a question around gui animations using gui.animate(…):

  • I have 4 gui box nodes that “pulse” using a pingpong playback changing their scale.
  • When a user has the mouse over one of the boxes the animation gets cancelled for that box and it gets enlarged to the max size.
  • When the user moves the mouse away the box goes back to “pulsing”, but because the other boxes never stopped it is now out of sync - this creates a visually jarring experience.

Does anyone have any ideas or suggestions on how to bring the box into sync with the rest of them?

Assume four nodes exist, each of which are pulsing in unison.
The player hovers the mouse over one of them.
The node in question “enlarges” while the others "shrink."
The player moves the mouse outside of the node’s collision box.
All nodes begin pulsing again beginning at the same starting point.

The only difference to the solution you posed is all nodes quit pulsing when the mouse hovers over one of them instead of allowing the others to continue pulsing.

2 Likes

That’s actually a really good idea :smiley: Would still be curious if the solution to the original problem exists, but I like the proposed UI/UX - will see how it looks when implemented!

You’d probably want to change the playback to just once instead of looping and restart the animation each time with a callback function.