CODEWITHSUNDEEP
javascript
skanecode
skanecode

Reputation: 63

How to create bar animation using CreateJS or other Javascript solution

I want to create some animated bars grow up and down like the one in the link.

http://www.createjs.com/soundjs

I am not sure how I can use CreateJS to do this.

Or other javascript solution will be appreciated as well. Please help.

Upvotes: 2

Views: 973

Answers (2)

Lanny
Lanny

Reputation: 11294

There are examples in the PreloadJS repository that contain bar preloaders:

You can see the source code in GitHub: https://github.com/CreateJS/PreloadJS/

The first example sets the width of a progress bar using HTML and jQuery https://github.com/CreateJS/PreloadJS/blob/master/examples/PreloadQueue.html

div.children("DIV").width(event.progress * div.width()); // Set the width the progress.

The second example sets the width of a progress bar using EaselJS and the scaleX property of a shape:

bar = new createjs.Shape();
bar.graphics.beginFill(loaderColor).drawRect(0, 0, 1, barHeight).endFill();
bar.scaleX = event.loaded * loaderWidth; // In a progress handler

Content for these examples is loaded using PreloadJS, which dispatches "progress" events that have loaded, total, and progress properties.

Hope that helps.

Upvotes: 1

Mi-Creativity
Mi-Creativity

Reputation: 9664

Using only CSS3 Animation, this is a similar bars animation: Updated JS Fiddle

just fine tune the timing values in animation-duration: 1.2s; for each class .bar# to get the most desired result. 

@keyframes barAnim {
    0%, 100% {
        height: 50px;
    }
    50% {
        height: 250px;
    }
}
#test {
    width:100%;
    height:300px;
    display:flex;
    align-items: center;
}
.bar {
    width:50px;
    height:200px;
    display:inline-block;
    background-color:orange;
    margin:2px;
    animation: barAnim 1.3s infinite ease-in-out;
}
.bar1 { animation-duration: 1.2s; }
.bar2 { animation-duration: 1.8s; }
.bar3 { animation-duration: 1.5s; }
.bar4 { animation-duration: 2.1s; }
.bar5 { animation-duration: 1.6s; }
.bar6 { animation-duration: 1.1s; }
<div id="test">
  <span class="bar bar1"></span>
  <span class="bar bar2"></span>
  <span class="bar bar3"></span>
  <span class="bar bar4"></span>
  <span class="bar bar5"></span>
  <span class="bar bar6"></span>
</div>

Resources:

Upvotes: 1

Related Questions