Close a bezier curve

[Ash Williams]

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

[GreenSock]

Welcome to the forums, @Ash Williams. 

 

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!

[Ash Williams]

 

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:

 

Thanks