Search In
• More options...
Find results that contain...
Find results in...

# straight path animation with one bezier curve

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 there~

I wanna create a car animation from point1 to point4 and always starting from point1(loop).  As the pic shown below, point1 to point2 and point3 to point4 are straight lines.  Only point2 to point3 is in bezier curve.  How can I make it works?!  please help~ thanks a lot

Here's my code below

```<script type="text/javascript">
TweenMax.to( document.getElementById("car"), 10, {
bezier: {
type: "cubic",
values: [
{ x: 1200, y: 445 },
{ x: 900, y: 520 },
{ x: 660, y: 600 },
{ x: 0, y: 500 },
],
},
ease: Linear.easeNone,
repeat: -1
});
</script>
```
##### Share on other sites

Hi and welcome to the GreenSock forums.

There are a couple of things regarding this particular scenario to notice.

First, the type of bezier curve. Usually a cubic bezier is composed of a starting point, an end point and two control points, in this case you're giving the bezier plugin just the points, but the plugin is interpreting this values as one point. In order to know a little more about how bezier curves work take a look at this:

http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_B.C3.A9zier_curves

And the documentation of the Bezier Plugin:

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

Second, in order to create the path in the image (thanks for providing it), you'll need to create a timeline for each of the steps in the curve. This because you can't create that path in just one instance. You need to indicate a first straight path, then the bezier curve and finally the final straight path. This because if you pass all the values in one instance the Bezier Plugin will return a curve with all the points, then the element will be animated in a curve pattern instead of a straight line in the first and last segments. Something like this:

```TweenLite.set("#div1", {x:1200,y:445});

tl
.to(target, 1,{x:900, y:520})
.to(target, 1,
{
bezier:
{
values:[{x:900,y:520},
{x:780,y:490},
{x:660,y:600}]
}
})
.to(target, 1, {x:0,y:500});
```

Like that you're animating the straight lines without passing them to the bezier pluigin, which is ultimately unnecessary. You can see a simple example here:

See the Pen acsBq?editors=001 by rhernando (@rhernando) on CodePen

Rodrigo.

• 2
##### Share on other sites

Thank you so much

one more question: how can I make it automatically run and loop without a button and also make the object's speed a bit slower?

##### Share on other sites

Hi, to run it automatically just set "paused" to false. To loop it set "repeat: -1". To make it faster/slower you can use timeScale method; Also note that repeat is property ot TimelineMax, not TimelineLite.

Here is a pen:

See the Pen LpaCl by bassta (@bassta) on CodePen

• 2
##### Share on other sites

Thank you Chrysto!  you make my day