How can I animate a bar charts clip-path? - html

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>