Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Crispy Customs

Animation Trouble Preview vs. Live Site

Recommended Posts

Posted · Original PosterOP

Hi, i'm having trouble with an animation not working properly on my live site vs when i preview it locally. The video shows how the live website previews vs the local. The second version is the correct one. I'm not sure how to fix it.


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

 $(".menu").click(function() {
    if ( $(".top_banner").height() != h)
      $(".line_top, .line_bot").addClass("marginleft"),
      $(".line_mid").css("transform", "rotate(45deg)"),
      $(".line_mid_2").css("transform", "rotate(-45deg)");
      $(".line_top, .line_bot").removeClass("marginleft"),
      $(".line_mid").css("transform", "rotate(0deg)"),
      $(".line_mid_2").css("transform", "rotate(0deg)");
<div class="top_banner">

    <div class="top_bar">
      <button class="menu">
        <div class="line_container">
          <div class="line line_top"></div>
          <div class="line line_mid"></div>
          <div class="line line_mid_2"></div>
          <div class="line line_bot"></div>
        //more stuff below
.line_container {
  position: relative;
  height: calc(0.4 * 80px);
  width: calc(0.5 * 80px);
  margin: 30% 25%;
.line {
  position: relative;
  height: 2px;
  width: 40px;
  background: white;
  transition: all 0.5s ease-in-out;
.marginleft {
  margin-left: calc(0.25 * 80px);
  width: 0;
  transition: all 0.5s ease-in-out;
.line_top {margin-top: 0;}
.line_mid , .line_bot {margin-top: calc(16px - 3px);}
.line_mid_2 {margin-top: -2px;}


View my work here




Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now