Consecutive bezier paths not as expected

[tnavarra]

I'm a relative newbie to GSAP, so this maybe a simple problem but I can't seem to figure it out. I have a ball coming into the frame on one bezier/motion path which is working as expected. However, the next transition for it to go out of the frame has the curve going down instead of up. See the attached image for how I want the paths to work (how they look in flash). The second path works as expected when it is not following the first path. Can someone please explain what I'm missing? I put together a codepen. 

See the Pen ONdypp?editors=0010 by tnavarra (@tnavarra) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

I'm having trouble following this and I'm confused why both paths start at x:0, y:0

 

baseballPath1 = [{x:0, y:0}, {x:190, y:-109}, {x:262, y:-106}],
baseballPath2 = [{x:0, y:0}, {x:-175, y:-62}, {x:-268, y:-129}],

Just to test your points I put all of them into 1 path, changed the curviness to 0 and moved the start left and top of the ball around so that I could see the ball move through the entire path. (you had it offscreen quite a bit).

 

To debug I place green dots at each point. 

 

http://codepen.io/GreenSock/pen/eZxvPZ?editors=0010

 

As you can see, the ball is going through each point.

 

I think you may have to adjust the path values to better match the image you provided. It should be totally possible.

 

For the best and easiest workflow to get an object to follow a path, I would suggest our MorphSVGPlugin which allows you to take an SVG <path> and have any object follow it. in other words, you just draw your path in an SVG and the plugin can use that data for the bezier tween.

 

Full details: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/

 

MorphSVGPlugin is available to Club GreenSock members.