Jump to content
GreenSock

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

straight path animation with one bezier curve

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 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 :)

 

test.jpg

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>
Link to comment
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

 

Feel free to fork and adapt it to your scenario.

 

Rodrigo.

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

Link to comment
Share on other sites

Thank you Chrysto!  you make my day  8-)

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