Jump to content
GreenSock

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

Parabolic trajectory

Recommended Posts

Hi,

I am trying to create a parabolic trajectory for a movieclip:

- I know the starting X and Y

- I know the ending X and Y

- X movement is linear...

- ...that combined with Y must generate a parabolic trajectory simulating the movieclip "jumping" on the 2D plane from Y to Y

 

How can I achieve this effect with GSAP?

Thanks

Link to comment
Share on other sites

Probably the easiest way is to have separate tweens for x and y movement that have different eases.

 

 

 

var tl = new TimelineMax({repeat:-1})

tl.to(mc, 4, {x:550, ease:Linear.easeNone})
  .to(mc, 2, {y:-200, ease:Power2.easeInOut, repeat:1, yoyo:true}, 0)

 

Here is a JavaScript demo but the AS3 syntax is identical  http://codepen.io/GreenSock/pen/aOVpRO

 

Or you could pass an Array of points into our BezierPlugin: http://greensock.com/bezier-as

  • Like 1
Link to comment
Share on other sites

Well, I could use yoyo and add a linear offset to y when onUpdate is triggered, I have to try, but before this I have to understand why this doesn't work

 

var jumpTimeline: TimelineMax = new TimelineMax(  );
jumpTimeline.to(xxx, 2, { y: 200, repeat: 1, yoyo: true}, 0);
 
I would expect a parabolic trajectory (I removed the X tween part for clarity), to y=200 and back, but yoyo property is ignored, it reaches 200 in 2 secs and stops, why?
Link to comment
Share on other sites

I resolved in a different and more mathematical way:

 

xOffset = toX - item.x;
yOffset = toY - item.y;
var jumpDuration: Number = Math.sqrt(Math.pow(xOffset, 2) + Math.pow(yOffset, 2)) / 500;


jumpTimeline = new TimelineLite( { onUpdate: fixY } );


jumpTimeline.to(item, jumpDuration, { x: toX,  ease: Linear.easeNone }, 0);
jumpTimeline.to(item, jumpDuration / 2, { y: item.y - 200 * jumpDuration,  ease: Power1.easeOut }, 0);
jumpTimeline.to(item, jumpDuration / 2, { y: item.y,  ease: Power1.easeIn }, jumpDuration / 2);


private function fixY(): void {
item.y += yOffset * jumpTimeline.progress();
}
 
I animate the item as if it was moving on a parabolic trajectory with the same starting and ending Y coordinates, and on each update of the timeline I "fix" the precalculated Y coordinate adding the needed value of the linear Y offset, calculating it by the current timeline progress value.
The result is a perfect parabolic trajectory on a fake 3D plane.
Link to comment
Share on other sites

regarding your repeat not working in Post #3 the reason is that .to() generates and inserts a TweenLite tween. 

 

It was my mistake to show you the JS version as on that side we check to see if TweenMax is loaded, and if so, we switch over to a TweenMax tween which does support repeats. 

 

You can do this:

tl.to(mc, 4, {x:550, ease:Linear.easeNone})
  .add(TweenMax.to(mc, 2, {y:-200, ease:Power2.easeInOut, repeat:1, yoyo:true}), 0);

Sorry for the confusion.

Link to comment
Share on other sites

No problem ;)

Thank you Carl!

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