Looking to add some flair to your bar charts with clip-path animations?

I am currently working on a bar chart that features gradient backgrounds on the bars. The height of the gradient remains constant, and I have implemented clip path to display only a portion of each bar. This ensures that the darkest part of the gradient is always at 100% height.

However, I have encountered an issue when trying to animate each bar from a height of 0px to its designated height. Initially, I attempted to animate the clip-path using various methods such as animation, transition, and transform but was unsuccessful. Subsequently, I tried animating the bars themselves using CSS animations - which partially worked. Unfortunately, the bars expanded from the top down instead of the desired bottom-up effect. You can view my implementation in this JSFiddle.

My question is: How can I achieve the desired effect of making the bars expand from the bottom up?

.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>

htmlcsscss-animations

Answer №1

If you're looking to achieve a gradient animation without using clip-path, one approach is to set the height of your element and establish a fixed size for the gradient. By animating the height, you can create the desired effect.

To animate the element from the bottom up, consider setting the elements to inline-block display (instead of float) and include a hidden pseudo-element with height: 100% to define the baseline at the bottom.

.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>

If interested, it's possible to achieve this effect using just one element with multiple backgrounds:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Compiling 'react-scripts' to include a few images as data URIs within the CSS file

I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident. An ongoing issue we are facing is the excessive size of our main CSS fil ...

cssreactjsoptimizationnpmsass

Problem experienced when websites do not adjust to fit properly on a mobile device's screen dimensions

When creating a CSS webpage, I referred to http://reddit.com to ensure the sidebar always maintained a consistent size while the left side gradually shrank when the screen was resized. sidebar{width:400px;float:right;/*rest doesn't matter*/} leftside ...

htmlcss

Tips for dynamically altering div background colors based on user interactions?

Assume I have the code snippet below: <body> <div class = "header">Header content</div> <div class = "content">content</div> </body> Is there a way to hide the header div as the user scrolls down on the website, and ...

javascriptjqueryhtmlcss

Is there a method for creating a unique file name automatically during the upload process?

I recently created a website where users can upload various files. However, as a newcomer to web development, I am struggling with generating random file names for uploads. Despite trying multiple code snippets, nothing seems to work. Below is the code I&a ...

phphtml

Replica of Spotify - Bottom Section - HTML and CSS Styling

I have been attempting to replicate the Spotify interface using only HTML and CSS. While I have successfully created the player section, I am struggling to center the player and incorporate the other two details as shown in the attached images. The 'G ...

htmlcssclone

Adjust the height of the floating div to completely occupy the space below it

I have multiple DIVs within my content container, some floating to the right and others to the left on screens larger than 400px. See working example here: https://jsfiddle.net/cmbpt1hd/ I need the height of area-three to automatically adjust so it fills ...

javascriptjqueryhtmlcss

Creating a Duplicate of the Parent Element and its Child Elements using jQuery

Here is a code snippet I have that adds a new paragraph when a button is clicked. Currently, the script clones the "sub" div and appends it to the "main" div. However, the issue is that it only copies the content of the "inner" div within the "sub" div ins ...

javascriptjqueryhtmlfunction

What steps should be taken to position the Header and search bar in the middle of the screen?

How can I center the title and search bar on a website using Bootstrap? I've tried adding my-auto, but it doesn't work. Any suggestions?https://i.sstatic.net/3uuhT.png <!DOCTYPE html> <html lang="en"> <head> < ...

htmlcssbootstrap-5

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

htmlcss

What is the method for Variable and its associated value to flow seamlessly within the PHP-HTML-JS-PHP cycle?

My task involves adding a comments input box for every XML-RSS article. When I choose an RSS URL, the results typically look like this: Below is the PHP code snippet: for ($i=0; $i<=19; $i++) { $item_title=$x->item($i)->getElementsByTagName(&a ...

javascriptphphtml

Revamping Text() into <span> Encoded HTML with Kendo UI

I need to customize the style of a panel bar from Kendo UI, specifically I want to divide the text "Blah-1 Blah-2" into two separate span blocks in HTML format, like <span>Blah-1</span> and <span>Blah -2</span>. How can I achieve t ...

javascriptjqueryhtmlcsskendo-ui

Should we shift the sidebar to the right-hand side of the page? Is this accomplished using a float? Would it be necessary to include

Currently, I am tackling this code: http://jsfiddle.net/4XBtQ/1/ Upon inspection, it is evident that the right sidebar remains at the bottom of the left column. Various methods exist to position the sidebar on the right, but which approach is deemed corr ...

htmlcss

Can v-model be used with dynamic object keys?

I would like to showcase my data structure as follows: form: { email: '', password: '' } My goal now is to implement a loop to dynamically set the model using the form object. <div class="my-1" v-for="(value,name, index) in ...

htmlvue.jsvuejs2vue-componentv-model

ASP.NET MVC providing assistance for generating HTML output (rather than XHTML)

From what I can see, ASP.NET MVC Html Helpers seem to only produce XHTML-like tags (closed empty elements), which may not be valid HTML. Does ASP.NET MVC offer support for generating valid HTML output? ...

htmlasp.net-mvcxhtml

Storing a screen value with javascript made simple

I need to incorporate memory functions into my calculator, specifically MS (Memory Store), MR (Memory Restore), and MC (Memory Clear). For Memory Store, the screen value of the calculation needs to be saved, so if it's 90 + 7 = 97, that result should ...

javascripthtmlcssevents

Unable to display texture and color on .obj files in Three.js

After introducing a new model in .obj and .mtl formats into my three.js code, I encountered an issue where the color of the model would turn white, regardless of its original color or texture. Below is a snippet of the code related to the pig model: // ...

javascripthtmlcssthree.js

Is there a way to condense a paragraph of text without using a span or div element?

There is a common scenario where I often encounter this issue: <span> <p>hello world</p> </span> It involves reducing the width of a paragraph to fit the text, but unfortunately it leads to clutter in my HTML. Is there a way to ...

htmlcss

Displaying a value in a React component using material-ui's TextField

Can anyone help me with printing the email a user enters into the textfield within the Dialog when a button is clicked? I have been struggling to achieve this due to my function's structure. Any guidance would be greatly appreciated. export default fu ...

javascriptcssnode.jsreactjsmaterial-ui

Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only dis ...

htmlcss

Angular Material style focused border

Upgrading from Angular 13 to Angular 15 has been quite the ordeal for me. Many of my designs are broken, and I'm still trying to fix them. The main issues seem to be related to upgrading Angular Material to version 15. Below is a list of all my curr ...

cssangularuser-interfaceangular-materialangular15