Jump to content
Search Community

Make object bezier tween using existing path

martis test
Moderator Tag

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

Hi guys,

 

I have a path that was drawn in illustrator. I want to have an element, a dot, move along this path from the bottom to the top.

 

I tried plotting the points using the default bezier tween, but it was a little off.

 

I then tried using the quadratic and cubic methods, but had horrible luck.

 

Is there an easy way to use this existing path to setup my bezier tween?

 

Here are my points (assuming that the bottom of the line is 0, 0)

 

{x:-199, y:-667},
{x:208, y:-947},
{x:315, y:-1072},
{x:350, y:-1156},
{x:381, y:-1303},
{x:342, y:-1497},

 

Thanks!

Link to comment
Share on other sites

Hi,

 

If you already have the path, assuming that you were able to convert the illustrator path to the bezier curve, you can try something like this:

 

See the Pen LuIJj?editors=001 by GreenSock (@GreenSock) on CodePen

 

Sure the sample uses some random values but is the concept what matters.

 

If this is not what you're after, please provide a reduce live test in codepen.

 

Rodrigo.

Link to comment
Share on other sites

Hello Martis,

 

Here is a simple example of the BezierPlugin:

See the Pen HmGuE by jonathan (@jonathan) on CodePen

 

You can try adding your points to it.. i left it commented out for the codepen example since the codepen preview area is pretty small to see the paths you provided.

TweenMax.to(".circle", 3, {
     bezier:{
        values:[
          {x:-199, y:-667},
          {x:208, y:-947},
          {x:315, y:-1072},
          {x:350, y:-1156},
          {x:381, y:-1303},
          {x:342, y:-1497}
        ] 
     }
});

Please see the BezierPlugin Docs

 

Does that help? :)

 

Rodrigo beat me to it again :)

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.
×
×
  • Create New...