gsap timeLineMax缓解不适用于宽度更改

Question

在下面的Codepen中，我试图最终完成此原型https://imgur.com/BhQ2X9F中的动画，但更紧迫的问题是-当高度或宽度发生变化时，动画不容易实现。

https://codepen.io/ohabash/pen/YzKajLz

如何使工作轻松自如？我乐于接受任何建议，可以使我更接近imgur中的动画。

var item = $(".itm");

// init animations // set click event
item.each(function(){
  var self = $(this);
  var inner = self.find('.inner');
  var timeline = new TimelineMax({ paused: true, reversed: true });
  
  // column / item animation
  timeline.from(self, 0, {
    width: '100%',
    ease: Elastic.easeOut.config(5, 0.2),
  }, 0.05);
  
  // inner animation
  timeline.from(inner, 0, {
    background: '#dc0038',
    height: 95+'vh',
    ease: Elastic.easeOut.config(5, 0.2),
  }, 0.05);
  
  // onclick
  self.on("click", function() {
    // toggle
    timeline.reversed() ? timeline.play() : timeline.reverse();
  });
});

body {
  background: #20262e;
  padding: 20px;
  font-family: Helvetica;
}
aside {
  background: #1a1721;
  margin: 0 1em;
  text-align: center;
  padding-top: 3em !important;
}
h1 {
  opacity: 0.2;
  font-weight: bold;
  letter-spacing: 0.2em;
}
.item-cols {
  position: relative;
}
.item-cols .itm {
  cursor: pointer;
  text-align: center;
}
.item-cols .itm .inner {
  background: #1a1721;
  padding: 5em 1em;
  font-weight: bold;
}
.item-cols .itm .inner:hover {
  background: rgba(0, 0, 0, 0.55);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-columns columns">
    <aside class="column is-3"><div class="inner"><h1>SIDEBAR</h1></div></aside>
    <div class="column content">
        <div class="columns is-multiline item-cols">
            <div class="itm column is-3"> <div class="inner">1</div></div>
            <div class="itm column is-3"> <div class="inner">2</div></div>
            <div class="itm column is-3"> <div class="inner">3</div></div>
            <div class="itm column is-3"> <div class="inner">4</div></div>
            <div class="itm column is-3"> <div class="inner">5</div></div>
            <div class="itm column is-3"> <div class="inner">6</div></div>
            <div class="itm column is-3"> <div class="inner">7</div></div>
            <div class="itm column is-3"> <div class="inner">8</div></div>
            <div class="itm column is-3"> <div class="inner">9</div></div>
        </div>
    </div>
</div>