CODEWITHSUNDEEP
javascriptanimationgsap
Abhijeet Salunkhe
Abhijeet Salunkhe

Reputation: 33

GSAP TweenMax: Need to make an HTML element jump in a semi circular path

I'm developing an interactive website which has a human character. I have implemented jump for the character but it happens in the triangular path (since not looking natural jump). So I need the jump to happen in a semi-circular path. Can someone help me making an HTML element jump naturally from its current position?

Current jump code:

TweenMax.to(app.humanCharacter.element, obstacleJumpSpeed, { bottom: app.humanCharacter.bottomOffset + obstacleHeight, left: app.humanCharacter.element.offset().left + obstacleWidth,

onComplete: function() {

    TweenMax.to(app.humanCharacter.element, obstacleJumpSpeed, { bottom: app.humanCharacter.bottomOffset, left: app.humanCharacter.element.offset().left + obstacleWidth, delay: obstacleJumpDelay,

        // humanCharacter's obstacle jump finished
        onComplete: function() {

            // starting walk cycle
            app.humanCharacter.activity.startWalkCycle();

            // restoring reference vars
            app.humanCharacter.isObstacleJump = false;
            app.humanCharacter.isJumping = false;
            app.humanCharacter.obstacleNum = 0;

            $('.tooltip-message').css({ 'opacity': 0 });

            // callback for next reference
            callback();

        }

    });

}

});

Upvotes: 0

Views: 228

Answers (1)

Jack
Jack

Reputation: 2970

The easiest way would probably be to just do a bezier tween. GSAP can smoothly plot a curved path through the coordinates you provide using its "thru" mode (which is the default). 

TweenMax.to(app.humanCharacter.element, obstacleJumpSpeed, {
  bezier: [{bottom: app.humanCharacter.bottomOffset + obstacleHeight, left: app.humanCharacter.element.offset().left + obstacleWidth}, {bottom: app.humanCharacter.bottomOffset, left: app.humanCharacter.element.offset().left + obstacleWidth}],
  onComplete:function() {
    //do more stuff...
  }
});

Read the docs at http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

A few pointers to keep in mind:

  1. I'd strongly recommend using "x" and "y" instead of "left" and "top" (or "bottom") because it much cheaper to animate those performance-wise (transforms don't affect layout).
  2. Try to avoid stringing animations together using callbacks - it's much cleaner to just sequence them in a TimelineLite or TimelineMax; it gives you far more control (you can then control the entire sequence as a whole). See http://greensock.com/sequence-video and http://greensock.com/position-parameter

If you don't want to do a bezier tween, you could do a combination of 3 tweens: one for the vertical movement up (with an easeOut), another for the vertical movement down (with an easeIn or maybe easeInOut), and a 3rd that is solely for the horizontal movement that'd span both of the others (run at the same time). But the bezier tween is probably best.

If you need more help, don't hesitate to ask in the GreenSock forums at http://greensock.com/forums/

Happy tweening!

Upvotes: 1

Related Questions