CODEWITHSUNDEEP
javascriptjqueryanimationvelocity.js
user555
user555

Reputation: 1529

Velocity js translateY issues

I have following code to do transitionx 

     var w = $(window).width()*0.02;

      $('#mChangePassword').velocity({translateX: w},
      {
        duration: 300,
        'complete': function(){
          $('.mSettingsMain').fadeOut(300);
        }
      });

Attached GIF how it works in mobile app http://g.recordit.co/WDCGVFPXsE.gif

NOTE: Clicking on the above link is not working somehow, copy pasting image links works.

Here the animation is coming from right to left when I click on button.

I want same animation from bottom to top, I tried using translateY but it is not working,

I tried with the following code

      var h = $(window).height()*0.02;

      $('#mChangePassword').velocity({translateY: h},
      {
        duration: 300,
        'complete': function(){
          $('.mSettingsMain').fadeOut(300);
        }
      });

but it is not working, I want the same animation from that gif "bottom to up" or "slide up".

Any help appreciated. Thanks.

Upvotes: 2

Views: 1680

Answers (1)

ydaniv
ydaniv

Reputation: 1289

When transitioning transforms in Velocity it's best to use forcefeeding and provide units to the property values:

$('#mChangePassword').velocity({translateY: [h + 'px', '100%']});

Upvotes: 1

Related Questions