jumping element during animation

Question

working on a hamburger menu toggle animation and noticed my background is moving while the animation is taking place. any ideas what can be the reason for it?

code:

<head>
<style>
body {
  background-color: #222;
  height: 100vh;
}

.nav-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
  cursor: pointer;
  height: 5px;
  width: 35px;
  background: #fff;
  position: absolute;
  display: block;
  content: "";
  border-radius: 2px;
  transition: all .5s ease-in-out;
}
.nav-toggle span:before {
  top: -10px;
}
.nav-toggle span:after {
  top: 10px;
}

.nav-toggle.active span {
  background-color: transparent;
}

.nav-toggle.active span:before, .nav-toggle.active span:after {
  top: 0;
}

.nav-toggle.active span:before {
  transform: rotate(45deg);
}
.nav-toggle.active span:after {
  transform: rotate(-45deg);
}
</style>
</head>
<body>
<a class="nav-toggle" href="#"><span></span></a>
</body>

http://codepen.io/rondoe/pen/BWJVpe

You mean it scrolls to the top? Its the default behaviour of Use href="javascript: void(0);" instead — CaptainHere, Mar 19 '17 at 13:42
Why using an `` tag with `href`? Look at this fiddle: https://jsfiddle.net/1yud9svw/3/ I think it's easier. — ata, Mar 19 '17 at 14:15
thanks guys, nothing worked for some reason. ata - nice method. — ron doe, Mar 21 '17 at 18:11

score 1 · Answer 1 · answered Mar 19 '17 at 13:46

1

When the user clicks in an <a> tag with href="#", the default behavior for the browser is to scroll to the top of the page.

To prevent this, add a preventDefault to the callback function that opens your hamburger menu:

document.querySelector(".nav-toggle").addEventListener("click", function(event) {
    event.preventDefault();
    this.classList.toggle("active");
});

answered Mar 19 '17 at 13:46

Patrick Hund

19,163
11
66
95

Thanks Patrick, this doesn't seem to work (at least in my browser). – ron doe Mar 19 '17 at 14:03
That's weird, I tried it in your code pen and it works like a charm (Safari / MacOS). Can you try with my fork of your pen? http://codepen.io/pahund/pen/PpEyMw – Patrick Hund Mar 19 '17 at 14:15
well, I tried your code. notice that if you delete the
elements and get rid of the scroll bar the jumping is still there. I'm using Safari / MacOS. thanks again.
– ron doe Mar 20 '17 at 07:00
OK, so then perhaps I misinterpreted what you mean by “jumping”. I assumed you meant scrolling to the top of the page. – Patrick Hund Mar 20 '17 at 07:33
if you look closely at the bottom of the element you'll see a 1 px jump up of all of the elements. – ron doe Mar 20 '17 at 07:35
sorry, I can't observe this, although I have the same browser and OS as you – Patrick Hund Mar 20 '17 at 07:39

jumping element during animation

1 Answers1