Animate height - transition scale

In this example below you will see how to do a Animate height - transition scale with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mayko780, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mayko780 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animate height - transition scale</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <a href="#" data-liquid="#liquid">Toggle</a>
<div id="liquid" class="liquid hidden">
  <p>Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>

  <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.d Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.</p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mayko780/animate-height-transition-scale-vXkKwj */
.hidden {
  display: none;
}
.animating {
  overflow: hidden;
  position: relative;
}
.open {
  translateY: "0%";
}
.close {
  translateY: "100%";
}


/*Downloaded from https://www.codeseek.co/mayko780/animate-height-transition-scale-vXkKwj */
var animationDuration = 0.5;
$('[data-liquid]').each(function(){
  var target = $($(this).data('liquid'));
  $(this).on('click', function(e) {
    
    if (target.is('.hidden')) {
      target.removeClass('hidden');
      target.addClass('animating');
      // var height = target.outerHeight();
      // target.animate({"translateY": "0%"});
      target.addClass('close');
      // TweenMax.fromTo(
      //   target, 
      //   animationDuration,
      //   {
      //     transform: 'translateY(-100%)'
      //   }, 
      //   {
      //     transform: 'translateY(0%)',
      //     onComplete: function() {
      //       target.removeClass('animating');
      //     }
      //   }
      // );
      
      // TweenMax.to(target, animationDuration, {
      //   "height": height, 
      //   onComplete: function() {
      //     target.removeClass('animating');
      //   }
      // });
    } else {
      target.addClass('animating');
      TweenMax.to(target, animationDuration, {
        "height": 0, 
        onComplete: function() {
          target.removeClass('animating');
          target.css({"height": "auto"});
          target.addClass('hidden');
        }
      });
    }
  });
})

Comments