How can I animate a div to go to a specific spot on the screen?

I think this problem is relatively simple, but I can't figure it out.

My goal is to smoothly animate the navbar to the top right of the page. However, the code as is does not animate it, it just reappears at the top.

Meanwhile, the name div does animate, but it seems to be popping weirdly out of place.

Is there an obvious solution that I'm not thinking about here?

Here's the CSS and codepen:

https://codepen.io/dane2476/pen/oJaoEJ

body{
  overflow:hidden;
}
.name{
  padding:50px;
  font-size:40px;
  position: fixed;
  transition:1s;
}

.bar{
    margin-right:80%;
    margin-left:1%;
    border: 1.5px solid black;
 }
.bottom{
  background-color:black;
  position:absolute;
  bottom:0;
  right:0;
  width:100vw;
  height:50vh;
  transition:1s;
}
.nav{
    position:fixed;
    bottom:0;
    right:0;
    padding-bottom:100px;
    padding-right:100px;
    transition:1s;
}

.btn{
  font-weight: 100;
  margin-right:50px;
  background:none;
  color:white;
  font-size:25px;
  font-weight: 300;
  font-style: normal;
  transition:1s;
}

/* Transition classes */

.name.animateName{
  top:25px;
  left:40px;
  padding:0;
  font-size:25px;
  transition:1s;
  position:fixed;
}
.nav.animateNav{
  top:25px;
  right:40px;
  position:fixed;
  transition:1s;
}
.btn.navButton{
    font-weight: 100;
    margin-right:50px;
    background:none;
    color:black;
    font-size:20px;
    font-weight: 300;
    font-style: normal;
    transition:1s;
}
.bottom.out{
  transform:translateY(100vh);
  transition:1s;
}

2 answers

  • answered 2019-01-11 05:57 Hiren Vaghasiya

    You are animating different property like bottom and when element added then top and you can't animation top:auto so you need to animate bottom or top with specific position or % and name div does animate but nav animate taking time so it display slow animate, check it

    document.addEventListener('DOMContentLoaded', function(){
      document.querySelectorAll('button').forEach(function(button){
        button.onclick = function (){
          document.querySelector('.name').classList.toggle('animateName');
          document.querySelector('.nav').classList.toggle('animateNav');
          document.querySelector('.bottom').classList.toggle('out');
          
          document.querySelectorAll('.btn').forEach(function(btn){
            btn.classList.toggle('navButton');
          });
        }
      });
    });
    body{
      overflow:hidden;
    }
    .name{
      padding:50px;
      font-size:40px;
      position: fixed;
      transition:1s;
    }
    
    .bar{
        margin-right:80%;
        margin-left:1%;
        border: 1.5px solid black;
     }
    .bottom{
      background-color:black;
      position:absolute;
      bottom:0;
      right:0;
      width:100vw;
      height:50vh;
      transition:1s;
    }
    .nav{
        position:fixed;
        bottom:100px;
        right:100px;
        transition:all 1s;
        top:80%;
    }
    
    .btn{
      font-weight: 100;
      margin-right:50px;
      background:none;
      color:white;
      font-size:25px;
      font-weight: 300;
      font-style: normal;
      transition:1s;
    }
    
    /* Transition classes */
    
    .name.animateName{
      top:25px;
      left:40px;
      padding:0;
      font-size:25px;
      transition:1s;
    }
    .nav.animateNav{
      top:25px;
      right:40px;
      transition:all 1s;
      bottom:80%;
    }
    .btn.navButton{
        color:black;
        font-size:20px;
        transition:all 1s;
    }
    .bottom.out{
      transform:translateY(100vh);
      transition:1s;
    }
    <!DOCTYPE HTML>
    <html>
    <head>
    </head>
    <body>
      <div class="name">
        My Name
        <div class="bar"></div>
      </div>
      
      <div class="bottom">
      </div>
      <div class="nav">
        <button class="btn">This</button>
        <button class="btn">is</button>
        <button class="btn">a</button>
        <button class="btn">test</button>
      </div>
      
    </body>
    </html>

  • answered 2019-01-11 06:11 Jir

    The problem is in your nav class. You are setting the bottom position for the nav then while animating it you're giving it a top position which is making your animation to not work.

    Solution:

    .nav{
    position:fixed;
    top: 80%; //or any value that works for you
    right:0;
    padding-bottom:100px;
    padding-right:100px;
    transition:1s;
    

    }

    This will make your animation work as you already have a top position given to the nav class.