Jump to content
GreenSock

Ash Williams

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
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

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