How to simulate jumping animation?

[Tony Song]

Hi GreenSock devs,

I wonder how to simulate jumping from the left to right, not just up-down.

I achieve it using MotionPath plugin, but seems like it's not jumping in curve/curly, but like moving 1 point to 1 point. 

Could anyone please help with this? thanks in advance!

 

Regards,

 

Tony

See the Pen RwMwBJP by tonywei (@tonywei) on CodePen.

[GreenSock]

I read your question a few times, @Tony Song, but I don't understand what you're asking. Can you please be more specific?  Is there a GSAP-specific question you have?

 

You might want to look into CustomEase. 

[Tony Song]

2 hours ago, GreenSock said:

I read your question a few times, @Tony Song, but I don't understand what you're asking. Can you please be more specific?  Is there a GSAP-specific question you have?

 

You might want to look into CustomEase. 

Hi GreenSock

sorry if i'm not clear enough

 

the pink ball jumping animation is not curvy.

let me draw the example:

 

And the one I want to achieve is the curvy jumping path, like real jumping ball:

Hope I elaborate my question

[mvaneijgen]

@Tony Song I've set the  `curviness:` property of your path to `3` and now the path seems much more curvy, see the docs for a more detailed explanation https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

See the Pen vYRYvrZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Tony Song]

1 hour ago, mvaneijgen said:

@Tony Song I've set the  `curviness:` property of your path to `3` and now the path seems much more curvy, see the docs for a more detailed explanation https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

 

 

Hi @mvaneijgen

thanks a lot!!! I didn't know the "curviness" exist!

 

Regards

 

Tony

[mvaneijgen]

@Tony Song Glad to help! 

 

Be sure to check the docs, they are great. Most of the entries also have a video where everything is explained in detail! Also with this one, the curviness property is demonstrated at minute 10:19

 

 

[BosCodian]

is there a way to also control the ease when animating along a path?

[Rodrigo]

36 minutes ago, BosCodian said:

is there a way to also control the ease when animating along a path?

Absolutely! You can use any easing you want on any GSAP Tween:

https://gsap.com/docs/v3/Eases

 

If you have any other questions, remember to post a minimal demo that clearly illustrates the issue you're having.

 

Happy Tweening!

[BosCodian]

I have created this demo in stackblitz
I have the ease as back.out(1.7) but there is no overshoot.
all the code is in page.tsx file

[Rodrigo]

Hi,

 

Yeah that is not possible I'm afraid. Neither the MotionPath plugin nor the easing functions have a way to guess how the path should go on after the end of the path you passed to it. Think of a rollercoaster (a weird one though) that doesn't end where it starts, MotionPath works in a similar fashion, moving the element from the start to the end of the path, but if you say: "I want the rollercoaster to go beyond the end of the track and then go back to the end position", you end up with a tragedy or if there's no one on board a lot of wasted money.

 

Perhaps considering the demo in this thread you could explore Custom Bounce:

https://gsap.com/docs/v3/Eases/CustomBounce

 

Hopefully this helps

Happy Tweening!

[BosCodian]

Got it 😅
 

there's a solution that gives you that back ease feel! 🎢

instead of trying to make the rollercoaster magically extend its own track, we build a little extra track piece that goes slightly past the station, then use a second, quick movement to bring it back to where passengers need to get off.

Here's a minimal demo showing the technique - it uses a two-step approach where the motion path overshoots the target, then a quick direct animation pulls it back to the final position