Jump to content

# 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

##### 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

• 1
##### 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?
##### 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.
##### 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.

No problem

Thank you Carl!

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