Jump to content
GreenSock

tnavarra

Consecutive bezier paths not as expected

Recommended Posts

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. 

post-44016-0-12654000-1462581768_thumb.jpg

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

Link to comment
Share on other sites

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.

  • Like 2
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.
×