Smooth animation between multiple elements

In this example below you will see how to do a Smooth animation between multiple elements 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>Smooth animation between multiple elements</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>

  <div id="items">
  <div id="item1" class="liquid">
    <div class="inner">
      Item 1
    </div>
  </div>
  <div id="item2" class="liquid">
    <div class="inner">
      Item 2
    </div>
  </div>
  <div id="item3" class="liquid">
    <div class="inner">
      Item 3
    </div>
  </div>
  <div id="item4" class="liquid">
    <div class="inner">
      Item 4
    </div>
  </div>
</div>


<div id="buttons">
  <p><a href="#" class="btn" data-show='["#item1", "#item2", "#item3", "#item4"]' data-hide='[]'>Show all</a></p>
  <p><a href="#" class="btn" data-show='[]' data-hide='["#item1", "#item2", "#item3", "#item4"]'>Hide all</a></p>
  <hr>
  <p><a href="#" class="btn" data-show='["#item1"]' data-hide='["#item2", "#item3", "#item4"]'>Show 1; Hide 2, 3, 4</a></p>
  <p><a href="#" class="btn" data-show='["#item2"]' data-hide='["#item1", "#item3", "#item4"]'>Show 2; Hide 1, 3, 4</a></p>
  <p><a href="#" class="btn" data-show='["#item3"]' data-hide='["#item1", "#item2", "#item4"]'>Show 3; Hide 1, 2, 4</a></p>
  <p><a href="#" class="btn" data-show='["#item4"]' data-hide='["#item1", "#item2", "#item3"]'>Show 4; Hide 1, 2, 3</a></p>
  <hr>
  <p><a href="#" class="btn" data-show='["#item1", "#item2"]' data-hide='["#item3", "#item4"]'>Show 1, 2; Hide 3, 4</a></p>
  <p><a href="#" class="btn" data-show='["#item1", "#item3"]' data-hide='["#item2", "#item4"]'>Show 1, 3; Hide 2, 4</a></p>
  <p><a href="#" class="btn" data-show='["#item1", "#item4"]' data-hide='["#item2", "#item3"]'>Show 1, 4; Hide 2, 3</a></p>
  <p><a href="#" class="btn" data-show='["#item2", "#item3"]' data-hide='["#item1", "#item4"]'>Show 2, 3; Hide 1, 4</a></p>
  <p><a href="#" class="btn" data-show='["#item2", "#item4"]' data-hide='["#item1", "#item3"]'>Show 2, 4; Hide 1, 3</a></p>
  <p><a href="#" class="btn" data-show='["#item3", "#item4"]' data-hide='["#item1", "#item2"]'>Show 3, 4; Hide 1, 2</a></p>
  <hr>
  <p><a href="#" class="btn" data-show='["#item2", "#item3", "#item4"]' data-hide='["#item1"]'>Show 2, 3, 4; Hide 1</a></p>
  <p><a href="#" class="btn" data-show='["#item1", "#item3", "#item4"]' data-hide='["#item2"]'>Show 1, 3, 4; Hide 2</a></p>
  <p><a href="#" class="btn" data-show='["#item1", "#item2", "#item4"]' data-hide='["#item3"]'>Show 1, 2, 4; Hide 3</a></p>
  <p><a href="#" class="btn" data-show='["#item1", "#item2", "#item3"]' data-hide='["#item4"]'>Show 1, 2, 3; Hide 4</a></p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/mayko780/smooth-animation-between-multiple-elements-xpQRav */
body {
  padding: 50px;
  display: flex;
}

.animating {
  overflow: hidden;
}

.hidden {
  display: none;
}

.liquid .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

#items,
#buttons {
  width: 50%;
  padding: 10px;
}

#buttons {
  font-size: 12px;
}
#buttons a {
  text-decoration: none;
  color: #000;
}
#buttons p {
  margin: 0;
}

#item1 .inner {
  background: #bdc;
  height: 60px;
}

#item2 .inner {
  background: #dcb;
  height: 40px;
}

#item3 .inner {
  background: #cbd;
  height: 95px;
}

#item4 .inner {
  background: #dcc;
  height: 23px;
}


/*Downloaded from https://www.codeseek.co/mayko780/smooth-animation-between-multiple-elements-xpQRav */
var items = $("#items >");

var buttons = [];
items.each(function () {

  var thisID = [$(this).attr("id")];
  var others = items.not($(this));
  var otherIDs = [];

  others.each(function () {
    otherIDs.push($(this).attr("id"));
  });

  buttons.push({
    show: thisID,
    hide: otherIDs
  });
});

// console.log(buttons);


$(".btn").on("click", function (e) {
  e.preventDefault();
  var hide = $(this).data("hide").join(",");
  var show = $(this).data("show").join(",");
  // console.log(hide, show);


  var speed = 1;

  var tl = new TimelineMax();
  tl.to($(hide), speed, {
    opacity: 0,
    ease: Linear.easeNone,
    onStart: function onStart() {
      $(this).addClass("animating");
    },
    onComplete: function onComplete() {
      $(this).removeClass("animating");
    }
  })
  // .add("scene1")
  .to($(hide), speed, {
    height: 0,
    ease: Linear.easeNone,
    onStart: function onStart() {
      $(this).addClass("animating");
    },
    onComplete: function onComplete() {
      $(this).removeClass("animating");
      $(this).addClass("hidden");
    }
  }, "scene1")

  // .set($(show), {height:"auto"})
  // .to($(show), speed, {
  //   height: "auto",
  //   ease:Linear.easeNone,
  //   onStart: function() {
  //     // $(this).css({height: "auto"});
  //     $(this).addClass("animating");
  //   },
  //   onComplete: function() {
  //     $(this).removeClass("animating");
  //   }
  // })

  .set($(show), { height: '0' }, "scene1")
  // .from($(show), speed, {height: '0'}, "scene1")

  .to($(show), {
    height: function height() {
      $(this).outerHeight();
    },
    // immediateRender: false,
    onStart: function onStart() {
      $(this).addClass("animating");
      $(this).removeClass("hidden");
    },
    onComplete: function onComplete() {
      $(this).removeClass("animating");
    }
  }, "scene1").to($(show), speed, {
    opacity: 1,
    ease: Linear.easeNone,
    onStart: function onStart() {
      $(this).addClass("animating");
      // $(this).removeClass("hidden");
    },
    onComplete: function onComplete() {
      $(this).removeClass("animating");
    }
  });

  // $(hide).animate({"opacity": 0}, function() {
  //   $(this).slideUp();
  //   $(show).slideDown(function() {
  //     $(hide).animate({"opacity": 1});
  //   });
  // });

});

Comments