[help Velocity] Besoin d'aide pour peaufiner mon animation

Bonjour à tous :)

L'idée est assez simple, j'ai une icone de menu responsive alignée à droite. Au clic sur celui-ci, mon menu s'affiche.
A la base ce menu est aligné à droite, hors de la largeur de l'écran de l'utilisateur. Au clic, il est sensé se déplacer pour se caler à droite mais de façon à être visible.

Voici mon code CSS :

.menu-container {
    position: absolute;
    display: none;
    top:0;
    right: 0;
    width: 240px;
    height: 100%;
    background: #212121;
    -webkit-transform:translateX(240px);
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
}

Et code js :

$( '#menu-responsive' ).on( 'click', function(e) {
        e.preventDefault();
        $('#menu-container').velocity({
            translateX: 0
        }, {
            display:'block',
        });
    });

Mon soucis étant que je n'arrive pas à avoir une animation fluide de décalage. Genre il se décale est apparaît simultanément en transition.
J'ai essayé avec velocity UI et les 'transition.slideRightIn' mais il m'affiche une scrollbareX et c'est saccadé.

Pouvez vous m'éclairer les gars ?

Have fun ;)