Skip to content
/ bilza Public

A Javascript Animation Engine for creating responsive animations on HTML5 Canvas

Notifications You must be signed in to change notification settings

skillzaa/bilza

Repository files navigation

Core Props Examples      Comp Projects


What is Bilza


A Javascript Animation Engine for creating responsive animations on HTML5 Canvas.


Latest Updates (23-sep-2022)

Bilza.js Basic Idea

  1. Bilza.js will enable you to create JavaScript animation that behave like a video. You can "play", "pause", "stop", "skip forward" and "skip backward" the animation just like a video. You can also draw any random frame from in between the animation or save that as an image.

  2. Bilza.js will enable you to create slide (presentations, lesson plans, advertisements etc) and then share them as html / javascript file.There are many content types (e.g. educational slides, business presentations etc.) which we want to be presented like a video but should be editable like normal text (or a PowerPoint presentation). In case of video format; editing is very expensive and time-consuming. Bilza.js final product is a simple JavaScript file that will run in any (decent) browser anywhere.

  3. In case you want your message / presentation to reach millions of viewers and the message is in videos format: the file size will be in Mega Bites (and this is on the lowest side). Imagine how many people will be reluctant to download such a heavy file or to share it. On the other hand, a JavaScript animation is very lightweight as compared to video format.  A JavaScript animation carrying the same message may have a file size of few kilo Bites. The heaviest thing in a JavaScript animation is the sound file.

  4. The single main "pain point" of creating JavaScript animation is creating responsive animations. We like our animations to fit all screen sizes. For this the bilza.js has been written with responsiveness in mind and (almost) every thing grow and shrink according to the screen size.

  5. Animation is code and Code is Reusable : One of the basic purpose of this library is to enable users to stitch together small pieces of animation and create complex animations.

  6. There is NO installation, NO plugins and NO dependencies (on any other library). This will enable your clients to consume your content with out any hassle.

  7. It is NOT morally and ethically correct for any developer / app to hold the data of its users as hostage. The hard work and effort that a user has put into creating an animation makes him the creator and owner of that animation. For this there will always be some command present in the library (working on it currently) which should enable the user to get their animation data in json format.  


Basic Feature

  • Ease of use
  • Responsiveness
  • Composable Animations
  • Behave like a Video


Important Sections of Documentation

How Bilza.js Works

Hello world Example

All Components Core Props Examples

Projects to showcase every component

Bilza.js Documentation (work in progress)


Selected Examples

Six Arrows

Colored Circles

Colored Circles

Colored Circles

100 Rectangles

100 Rectangles

Lines Animation

Lines Animation

Text and Grid Example

Text and Grid Example

Random Lines

Random Lines

Four Pics

Four Pics

Grid Lines Width

Grid Lines Width

Dancing Circles

Dancing Circles

100 Circles

Circles and Grid Example

Circles Component Demo

Circles Component Demo

Animating Grid

Animating Grid

Font Size Animation

Font Size Animation

Line Animation

Line Animation


If you want to be in touch or send me a bug report please use github issues.


23-sep-2022   (version 0.1.1) // - Arrow and Marker
17-sep-2022   (version 0.1.1) // - Big Changes in API
04-sep-2022   (version 0.1.0) // - Alhamdullah
06-aug-2022   (version 0.0.30) //0 ver short of 0.1.0
04-aug-2022   (version 0.0.29) //1 ver short of 0.1.0
26-july-2022   (version 0.0.28) //2 ver short of 0.1.0
25-july-2022   (version 0.0.27) //3 ver short of 0.1.0
23-july-2022   (version 0.0.26) //4 ver short of 0.1.0
22-july-2022   (version 0.0.25)
20-july-2022   (version 0.0.24)
13-july-2022   (version 0.0.23)
9-july-2022   (version 0.0.22) //Getting close to 0.1.0
7-july-2022   (version 0.0.21) //also ver 0.0.20
2-july-2022   (version 0.0.19) //release candidate for 0.1
21-june-2022   (version 0.0.17) //also ver 0.0.18
06-jun-2022   (version 0.0.16)
03-jun-2022   (version 0.0.15)
09-May-2022   (version 0.0.14)
08-May-2022   (version 0.0.13)
15-Apr-2022   (version 0.0.12)
28-March-2022 (version 0.0.11)
27-March-2022 (version 0.0.10)
26-March-2022 (version 0.0.7)
25-March-2022 (version 0.0.5)