Jump to content

# Close a bezier curve

## Recommended Posts

Hi everyone,

I have a simple problem to solve ( I'm sure that's something dum ): I have some points as bezier curve,
and I'm animating a Svg along that path.

This is the code:

```let flyMove = new TimelineMax({             ease: Linear.easeNone,             repeat: -1,             paused: true         });```

```        flyMove.to("#" + id, 12, {             ease: Linear.easeNone,             bezier: {                 values: [                     { x: startPointX, y: startPointY },                     { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },                     { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },                     { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },                     { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },                     { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },                     { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },                     { x: startPointX, y: startPointY }                 ]             }         });```

I'm trying to figure it out why the svg doesn't start again at the same point: can you help me?

Thanks in advance,

Simone

See the Pen JjoOagN by ashwilliams1992 (@ashwilliams1992) on CodePen

##### Share on other sites

Welcome to the forums,

The values that you pass in to the bezier are the points THROUGH which the bezier gets plotted starting at wherever the object is. In other words, if the object is sitting at an x,y of 0,0 and you tell it to bezier through a set of points and the first point is 10,10, it will start at 0,0 and go through 10,10, etc. You seem to be basing your logic upon an assumption that the element will jump to the first point you feed in and go from there.

Does that make sense?

If you want that behavior, you could just TweenMax.set() it to the first set of coordinates before you create your tween.

Let us know if you need anything else at all. Happy tweening!

• 1
##### Share on other sites

Thanks for the quick response: I forgot to tell you about another step before the random bezier, but I think I figured out.

The square needs to have a short animation on start.

Like you said, the trick is .set the position after the animation, to have a starting point for the bezier!

Here the codepen:

See the Pen JjoOagN by ashwilliams1992 (@ashwilliams1992) on CodePen

Thanks

## 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.
×