Search code examples
javascriptjquerycssanimationvelocity.js

Velocity.js animation delay


I am a little bit frustrated because velocity js acts strangely in my code.

How can these animations go in sequence if I haven't specified any delay time? After reading Velocity Docs I thought this should be simulations animations... But this is fired like: body animation, menu animation. It's even not the sequence in the code. Can someone point me the cause?

$('#pr-nav-icon').click(function() {
    $('#hamburger-menu-drop').velocity({marginLeft: "0px"}, {
        duration: 300,
        delay: 0,
        easing: 'easeInOutQuart'
    });
    $('body').velocity({marginLeft: "440px"}, {
        duration: 300,
        delay: 0,
        easing: 'easeInOutQuart'
    });
});

Here is my sass for this elements, if it could be the cause:

#hamburger-menu-drop {
  max-width: 420px;
  background: white;
  position: fixed;
  right: 0px;
  bottom: 0px;
  left: 0px;
  top: 0px;
  z-index: 9999;
  background-color: $darktext;
  overflow-y: auto;
  box-shadow: inset -10px 0 5px -5px hsla(0, 0%, 0%, 0.25);
  margin-left: -420px;
}

body {
  width: 100%;
  height: 100%;
  background: #fff;
  line-height: 1.55;
  font-family: $titlefont;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  color: $darktext;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  font-smooth: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
  font-size: 1.8rem;
  line-height: 1.25;
}

Solution

  • I figured what was the problem and it was really a stupid mistake of mine. Of course, velocity.js was working normally, as pointed by Thomas. The problem was that I've tried to animate the menu that was in the body and the body itself, so the animations elapsed.