Parabolic trajectory

[gigbig 0 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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

[gigbig 0 Likes (Newbie)]

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?

[gigbig 0 Likes (Newbie)]

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.

[Carl 9,066 Likes (Superhero)]

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.

[gigbig 0 Likes (Newbie)]

No problem

Thank you Carl!