How can I animate a bar charts clip-path?

Question

I have a bar chart that uses a gradient background on the bars. The gradient height is constant and I´m using clip path to show only a portion of the bar. This way, the darkest part is always at 100% height.

The problem I´m having is to animate each bar from 0px height to its given height.

First I tried animating the clip-path using animation, transition and transform. But no luck. Then I tried animating the bar itself using animations - and it kind of works. Only, it goes from top down rather than bottom up. See my fiddle here.

How can I make the bars expand from bottom?

.barChart { clear: both; height: 70px; width: 170px; border-bottom: solid 2px #eee;          }
    
    .bar {
      float: left;
      margin: 4px;
      width: 6px;
      background: linear-gradient(to top, #8BC2CA 0%, #2E92A0 100%);
      animation: expandBar 2s ease;
      animation-fill-mode: forwards;
    }
    
    .bar1 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
    .bar2 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
    .bar3 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
    .bar4 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
    .bar5 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
    .bar6 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
    .bar7 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
    .bar8 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
    .bar9 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
    
    @keyframes expandBar{
      0% {
        height: 0;
      }
      100%{
        height: 60px;
      }
    }

<div class="barChart">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
  <div class="bar bar4"></div>
  <div class="bar bar5"></div>
  <div class="bar bar6"></div>
  <div class="bar bar7"></div>
  <div class="bar bar8"></div>
  <div class="bar bar9"></div>
</div>

Answer 1

Instead of clip-path you can consider height on your element and a fixed size for your gradient. Then you can easily animate that height.

The trick for the animation is to make the elements inline-block (instead of float) and have a hidden one (set with pseudo-element) that will be height:100% in order to define the baseline at the bottom making your element to animate from bottom and not top.

.barChart {
  height: 70px;
  width: 170px;
  border-bottom: solid 2px #eee;
}
.barChart:before {
  content:"";
  display:inline-block;
  height:100%;
}
.bar {
  display:inline-block;
  margin: 4px;
  width: 6px;
  background: linear-gradient(to top, #8BC2CA 0, #2E92A0 70px); /*same as height:100%*/
  animation: expandBar 2s ease;
}

.bar1 {height: 80%;}
.bar2 {height: 20%;}
.bar3 {height: 60%;}
.bar4 {height: 70%;}
.bar5 {height: 50%;}

@keyframes expandBar {
  0% {
    height: 0%;
  }
}

<div class="barChart">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
  <div class="bar bar4"></div>
  <div class="bar bar5"></div>
</div>

In case you are intrested you can do this with only one element and multiple background:

.barChart {
  height: 70px;
  width: 170px;
  border-bottom: solid 2px #eee;
  --grad:linear-gradient(to top, #8BC2CA 0, #2E92A0 70px);
  background-image:var(--grad), var(--grad), var(--grad), var(--grad), var(--grad);
  background-size:6px 60%,6px 80%,6px 20%,6px 70%,6px 50%;
  background-position:4px 100%, 14px 100%, 26px 100%, 38px 100%,48px 100%;
  background-repeat:no-repeat;
  animation: expandBar 2s ease;
}

@keyframes expandBar {
  0% {
    background-size: 6px 0%;
  }
}

<div class="barChart">
</div>