Animate div to full screen size from current position on click, click again to animate back to original size

Question

I'm trying to emulate this general effect... http://www.wolfks.com/about/brand-promises#

So far I have this... JSFiddle

JS:

 $(document).ready(function(){
    $('.people-container').click(function() {
      if ($(this).hasClass('close-animate') || !$(this).hasClass('screen-animate')) {
        $(this).removeClass('close-animate').addClass('screen-animate');
      } else {
        $(this).removeClass('screen-animate').addClass('close-animate');
      }
    });
});

CSS:

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.people-title {
  text-align: center;
  padding: 25px;
}

.people-container {
  background: gray;
  margin-top: 10px;
  width: 100%;
  height: 100px;
  position: relative;
}

.screen-animate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  animation: fill-animate 0.5s forwards;
}

.close-animate {
  position: relative;
  width: 100%;
  height: 100px;
  animation: close-animate 0.5s;
}

/** Fill screen animation **/
@keyframes fill-animate
{ 
    50% { 
        width: 100%;
        left: 0;
        height: 50%;
    }
    100% {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
}

/** Close screen animation **/
@keyframes close-animate
{ 
    50% { 
        width: 100%;
        height: 50%;
    }
    100% {
        height: 100px;
        width: 100%;
    }
}

HTML:

<div class="people-container" style="background-color: red;">

  <div class="people-title">
    <h1>Carpenter</h1>
  </div>

  <div class="close-btn">&#10006;</div>

</div>

I'm having trouble getting the div to smoothly scale up to full screen. I dont need it to be exactly like the example... basically just looking for the full screen animation and closing animation from and to the div's original position on the page.

Any help?

Answer 1

Use transition to animate the height of the elements, you don't need to use position

The idea is to set the clicked element's height to full screen size ( 100vh ) and the other elements to 0 .

See snippet:

 $(document).ready(function() { $('.people-container').click(function() { if ($(this).hasClass('screen-animate')) { $('.people-container').removeClass('close-animate'); $(this).removeClass('screen-animate'); } else { $('.people-container').addClass('close-animate'); $(this).addClass('screen-animate'); } }); }); 

 body, html { width: 100%; height: 100%; margin: 0; } .people-title { text-align: center; padding: 10px; } .people-container { background: gray; margin-top: 10px; width: 100%; height: 100px; transition: all .5s; } .close-animate { height: 0; margin-top: 0; overflow: hidden; } .screen-animate { height: 100vh; margin-top: 0; } .close-btn { font-size: 24px; position: absolute; top: 10px; right: 10px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="people-container" style="background-color: red;"> <div class="people-title"> <h1>Carpenter</h1> </div> <div class="close-btn">&#10006;</div> </div> <div class="people-container"> <div class="people-title"> <h1>Laborer</h1> </div> <div class="close-btn">&#10006;</div> </div> <div class="people-container" style="background-color: blue;"> <div class="people-title"> <h1>Roofer</h1> </div> <div class="close-btn">&#10006;</div> </div> 

Answer 2

Stripped down version following the example website's approach that you linked. It uses CSS transition to handle the animation.

 $(document).ready(function() { $('.shutter').click(function() { if ($(this).hasClass('close-animate') || !$(this).hasClass('shutterExpanded')) { $(this).removeClass('close-animate').addClass('shutterExpanded'); $('.wrapper').addClass('shutterOpen'); } else { $(this).removeClass('shutterExpanded').addClass('close-animate'); $('.wrapper').removeClass('shutterOpen'); } }); }); 

 body, html { width: 100%; height: 100%; margin: 0; } .wrapper { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; transition: all .5s ease; } .shutter { position: relative; display: block; width: 100%; height: 20%; background: #000; box-sizing: border-box; border-top: 1px solid #323232; transition: all .75s ease; cursor: pointer; overflow: hidden; z-index: 5; box-sizing: border-box; text-align: center; color: #fff; } .shutterOpen .shutter { height: 0; } .shutter.shutterExpanded { height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="shutter"> <h2 class="shutterTitle">Roofer</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Contractor</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Tiler</h2> </div> <div class="shutter"> <h2 class="shutterTitle">Electrician</h2> </div> </div> 

Answer 3

Try this!! close is similary

.screen-animate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  animation: fill-animate 1.5s forwards;
}
/** Fill screen animation **/
@keyframes fill-animate
{ 
    0% { 
        width: 100%;
        top: 0;
        left: 0;
        height: 100px;
    }
    100% {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
}