Introducing JS3

Today I’m happy to announce that my first pass at an animation library for the JavaScript Canvas is now ready for public consumption and testing!

JS3 is a fast and lightweight drawing & animation library that allows you to easily draw and tween on the JavaScript Canvas in minimal lines of code.

It should look immediately familiar to Flash developers as it borrows heavily from the AS3 language and leverages a tween engine modeled after TweenLite.

The Core Features

This has been a personal project that I’ve been working on for the past few months to help streamline my canvas experiments as I find myself delving more and more into JavaScript.

I’m excited to continue to develop this and welcome your feedback and any constructive criticism on how to improve the library below. Cheers.

  • Max Stein

    Hi Stephen!

    Great tool, thanks a lot. I have one little problem that I was hoping you or someone could help me with.

    I have one large MC named back_mc on my stage and ontop of that MC layer I have a button that when pressed adds another MC from my library to the Background. Back_mc is recognized by the transform tool and works fine. The other MC that gets layered into back_mc after clicking the button gets added and can move. However, the added MC and the transform tool border do not properly fall in place. The other thing is, when I move Back_MC then try to move the added MC, the borders of the added MC are changed further.

    Is there a way for both MC’s to work with the transform tool while one MC is within the other MC?

    Thanks. I can provide my code and FLA if needed.


    • braitsch

      Try creating a container sprite and adding both of your MCs to that and then set the container sprite as the target of the transform tool. When the content of the container sprite changes you may have to reset the activeTarget of the TT to the container again so it redraws the boundaries correctly.

      • Max Stein

        Stephen. I think I tried what you have recommended but I cannot be sure since I am not as advanced in AS3 as you are. I am still unfortunately having the same issue.

  • Ganeshan Nadarajan

    The Transform tool in which the target can be dragged and custom scale and rotate handle icons that you can specify via a linked MovieClip in the library.

  • great tool, thank you so much!

  • Matt Dennis

    Has anyone gotten this to work with loaded images? I can get the image to load and get the transform handles but its not exactly right. I am loading an image into a movieclip, then adding that as a child to another movie clip. If I apply the transform tool to the child the load image is not centered in the handles. If I apply the transform tool to the parent, the image is centered and I can transform, but I can’t move or reselect the image to resize it.

  • amine

    Hello great tutorial, I’m using senocular Transform tool in my project, I was able to constrain the dragging of the object on the working area to a certain work area, But I can’t fix it when scaling or rotating object, they get off the page, how did you manage to contain everything whithin the working area ?