ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM NIO (9) Launches with Dynamic and Path Animation for HTML 5 Canvas with Javascript and CreateJS.


ZIM NIO (9) at https://zimjs.com has launched with exciting new animate() features.  Here is a mini-site: https://zimjs.com/nio/ that demonstrates new features:


  • convenience props: path, orient, flip, flipVertical, zoom, speed, layer, fade, extra
  • parameters: dynamic, drag, clamp, startPaused
  • properties added to target: percentSpeed, percentComplete
  • methods added to target: paused() – to support Accelerator()

Accelerator() – now accepts targets with dynamic animation
MotionController() – now accepts an Accelerator as a target




Blob and Squiggle shapes and animation path shapes


Added a TOP link to the search area. Added a Customize link to a tool to make a list of items used in your ZIM code https://zimjs.com/customize.html.
These will make various sets of links that will feature these items https://zimjs.com/docs.html?item=Circle – opens Circle docs. https://zimjs.com/docs.html?items=Button,Dial,Emitter – shows Featured Items.



The speed of animations can be controlled with the percentSpeed property on the target. Animations can be combined in an Accelerator to control all at once (along with Dynamos (dynamic Sprites) and Scrollers). Accelerators can be controlled with a MotionController (or techniques below). percentSpeed also works with Slider, Dial, Stepper, Swiper and Parallax. percentSpeed also can be added to wiggle or animate.

Animations can also be scrubbed with the percentComplete property on the target. percentComplete works with Slider, Dial, Stepper, Swiper and Parallax. percentComplete also can be added to wiggle or animate.

Animation along a path (Blob or Squiggle) supports dynamic animation. Objects can now be dragged along a path – see DRAG below:


Added dynamic parameter to animate().
Set dynamic to true to be able to change the speed of the animation
with the percentSpeed property of the target object.
See https://zimjs.com/nio/speed.html
Adjusted Accelerator so it accepts any object with a percentSpeed
including an object that is being dynamically animated.
Added a clamp parameter to animate() to limit dynamic animations to edges of their times
otherwise time can go well beyond and take just as long to reverse to active animation time range
See https://zimjs.com/nio/controls.html
Adjusted MotionController so if an Accelerator is passed in
the MotionController operates percentSpeed rather than x and y
in any of its types - mousemove, keydown, gamestick, etc.


Added percentComplete property to any object being animated.
Setting this gives manual control for instance with a Slider, Dial, mouse position, Parallax, etc.


In addition to orient, there is now flip and flipVertical convenience props for animate()
set these to true to flip the target with scaleX and scaleY depending on direction


Added a drag parameter to animate() that lets you drag path animations
Set startPaused to true to pause the animation and drag or drag a moving animation.
Added a redirect convenience property to the props object.
This defaults to true so that drag will alter the direction of the animation IF rewind is set
Set this to false to not alter the direction - you can still drag backwards
but when you let go, it will go in the direction the animation was going


EXTRA! provides animation based on animation. This allows for setting zoom, depth, speed, fade, etc. based on target y value while animating on a path but EXTRA! also opens up endless possibilities as the input and output does not have to be the target. This means that animation can also control properties of other objects and other object properties can control the animation. http://zimjs.com/nio/extra.html

There is a general and full format for EXTRA! but convenience properties are also provided. These primarily help with depth while animating along a path (Squiggle or Blob) or just a straight line with x and y.


Added zoom, speed, layer and fade convenience properties to animate props
These accept an array of values - [inputMin, inputMax, outputMin(default 0), outputMax(defaunt stageH)]
zoom:[.5,1.5] will scale the target to .5 if its location is at 0 and 1.5 if at stageH and then proportionally in between
speed:[50,100] will make the animation play at a slower speed the higher the target is on the stage
layer:[0,10] will make the target change layers from the bottom to the top if animated along the y from y=0 to y=stageH
fade:[0.5,1] will make the alpha fade as the target recedes to the back (top of the stage)
This will help with depth animation to make things farther away animate more slowly
and give the ability to animate around an object depth-wise.


In addition to the convenience properties above, ZIM EXTRA! has a more general and complete format:
Pass in a single EXTRA! object or an array of EXTRA! objects: extra:{} or extra:[{},{},{}]
The object has the following properties - all are optional except the outputProp which is required:
   |ZIM VEE| - each object below optionally accepts a ZIM VEE value for zik() to pick randomly from
   inputObj - (default target) - the object with the input property - probably the animation target but could be any object
   inputProperty - (default "y") - a string of the property name for the input - "x", "rotation", etc.
   inputMin - (default 0) - the minimum input value for the calculation - also see constrain
   inputMax - (default stageH) - the maximum input value for the calculation - also see constrain
   outputObj - (default target) - the object whose output property is being changed - probably the animation target but could be any object
   outputProp - (default "scale") - a string of the property name of the output - "scale", "layer", "rotation", etc.
   outputMin - (default 0) - the minimum output value for the calculation - also see constrain
   outputMax - (default 1) - the maximum output value for the calculation - also see constrain
   factor - (default 1) setting factor to -1 will reverse the direction of the animation
   outputRound - (default false) set to true to receive rounded output values
   constrain - (default true) constrain the output value to outputMin and outputMax
	   set to false to let values go beyond provided mins and maxes
	   this is quite usual when a proportion is easily figured at a certain range
	   and continued increase or decrease is desired outside the range - just turn constrain to false.
   extra:{outputProp:"scaleX"} would animate the scaleX of the target from 0-1 over the stage height
   extra:{outputObj:circle, outputProp:"alpha"} would animate the alpha of circle based on the animated target's y position
   extra:{inputObj:circle, inputProp:"x", inputMax:stageW, outputProp:"level"} would animate the target's child index as the circle's x goes across the screen
   ** in the last two examples, circle is a different object than the target of the animation - circle might be animating independently or based on a Slider value, etc.



Modified all corner properties to accept an Array [topLeft, topRight, bottomRight, bottomLeft]
new Button({corner:[20,20,20,0]}).center();


An chainable tap(call, distance, time, once) method has been added to all DisplayObjects along with a noTap() method. This acts like a traditional click where you down up without moving the mouse (within the distance parameter). This is handy too as the methods are chainable. The callback function will receive the traditional event object


Added a short chainable method hov(value, prop) to change the value of a hovered object. By default this is the alpha if a number is passed or the color if a string is passed
new Circle().center().cur().alp(.5).hov(.8).tap((e)=>{e.target.color = red; stage.update();});


ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

  • LEARN tutorials on how to start and code in ZIM
  • CODE ZIM Frame template and code context
  • DOCS the objects and commands all defined
  • NEWS latest features and articles
  • ABOUT features, applications, archives, reviews, etc.
  • EXAMPLES sample projects created in ZIM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


This entry was posted on October 25, 2018 by in animation, design, interactive media, javascript, launch and tagged , , , , , , , , , .


%d bloggers like this: