Motion Path issue

[cosmin86200]

Hello, and thanks for your help!

 

I'm trying to do a visual Match Engine for a game I'm working as a hobby (it's the first time using Gsap & Pixi) and I'm experiencing a weird issue (at least for me).

 

So, I'm using PIXI to create the canvas and the objects, and MotionPath to move the objects around in a top-view 2D-plane. The players (the objects) receive commands from my server (a X & Y cartesian coordonates pair).

 

My problem is that - if a player decides to stay on his position (remain in the same place) the animation does a weird thing (it moves around left-right-left-right a few times, before stopping where it shouldn't). If I cut the array just before he needs to stay in the same place, the animation works as expected.

 

The code I'm using to animate the object:

this.timeline.to(this.object, {
    motionPath: events,
    duration: 10,
    ease: 'power1.inOut'
});

 

Where events is an array of objects coming from the server:

0: Object { x: 36, y: 74 }

1: Object { x: 44.28, y: 79.3 }

2: Object { x: 60.84, y: 88.84 }

3: Object { x: 86.6, y: 102.62 }

4: Object { x: 119.72, y: 122.76 }

5: Object { x: 162.04, y: 146.08 }

6: Object { x: 212.64, y: 175.76 }

7: Object { x: 220, y: 180 }

8: Object { x: 220, y: 180 }

 

Any idea why this is happening and what I could do to avoid it? Players should have the possibility to wait in the same place if needed.

 

Thanks a lot!

 

EDIT: I added a CodePen to show the issue exactly!

See the Pen NWNQejg by cosmin86200 (@cosmin86200) on CodePen

[GreenSock]

Thanks for the minimal demo, @cosmin86200. MotionPathPlugin was struggling with drawing a curved line through a point that's right on top of the previous one. I just needed to add some logic to check that final point and drop it if it's the same as the previous one. This should be resolved in the next release which you can preview at https://assets.codepen.io/16327/MotionPathPlugin.min.js (you may need to clear your cache). 

 

Better? 

[cosmin86200]

@GreenSock Thank you very much for your help! This should work