createjs,tween,easing,greensock,easing-functions , How to convert Greensock's CustomEase functions to be usable in CreateJS's Tween system?

How to convert Greensock's CustomEase functions to be usable in CreateJS's Tween system?


Tag: createjs,tween,easing,greensock,easing-functions

I'm currently working on a project that does not include GSAP (Greensock's JS Tweening library), but since it's super easy to create your own Custom Easing functions with it's visual editor - I was wondering if there is a way to break down the desired ease-function so that it can be reused in a CreateJS Tween?


var myEase = CustomEase.create("myCustomEase", [

So that it turns it into something like:

var myEase = function(t, b, c, d) {
    //Some magic algorithm performed on the 7 bezier/control points above...

(Here is what the graph would look like for this particular easing method.) enter image description here


I took the time to port and optimize the original GSAP-based CustomEase class... but due to license restrictions / legal matters (basically a grizzly bear that I do not want to poke with a stick...), posting the ported code would violate it.

However, it's fair for my own use. Therefore, I believe it's only fair that I guide you and point you to the resources that made it possible.

The original code (not directly compatible with CreateJS) can be found here: (looks like the author was also asked to take down the repo on github - sorry if the rest of this post makes no sense at all!)

Note that CreateJS's easing methods only takes a "time ratio" value (not time, start, end, duration like GSAP's easing method does). That time ratio is really all you need, given it goes from 0.0 (your start value) to 1.0 (your end value).

With a little bit of effort, you can discard those parameters from the ease() method and trim down the final returned expression.


I took a few extra steps to optimize the above code.

1) In the constructor, you can store the segments.length value directly as this.length in a property of the CustomEase instance to cut down a bit on the amount of accessors / property lookups in the ease() method (where qty is set).

2) There's a few redundant calculations done per Segments that can be eliminated in the ease() method. For instance, the s.cp - s.s and s.e - s.s operations can be precalculated and stored in a couple of properties in each Segments (in its constructor).

3) Finally, I'm not sure why it was designed this way, but you can unwrap the function() {...}(); that are returning the constructors for each classes. Perhaps it was used to trap the scope of some variables, but I don't see why it couldn't have wrapped the entire thing instead of encapsulating each one separately.

Need more info? Leave a comment!


How to adjust a Greensock.js tween based on browser scroll y position rather than by the time?

How would I go about adjusting the time manually based on the scroll position? What might that look like? To basically 'scroll' the tween? So that the tween reacts to the scrolling mouse's Y position rather than just trigger and execute based on a preset time?

SoundJS — sounds played via instances not working in IE

I've run into some inconsistent behaviour between browsers with SoundJS, namely that IE11 is stingy about playing from Abstract Sound Instances. The following code works in every other browser I've tested, but not in IE11: <html> <head> <script src=""></script> <script> var sounds = {} function loadSounds() { createjs.Sound.registerSound('audio/song.mp3', 'song', 1);...

Inherit two classes - Javascript

I'm creating a new class definition Button that extends an existing Container class in EaselJS. There are no problems with that. However, I'd also like Button to inherit from a super class All, so that Button also has access to its .banana and .eatBanana. How do I go about this?...

How to create blocked animation with Tween.js?

I have this moveStep() function to make the Sprite move a step with Tween.js, createjs.Tween.get(this.lion).to({x: x, y: y}, 300); but if moveStep() is called more than once, the result is the same as when called once (x, y are calculated in the function). What is the practical way to chain...

CreateJS get the total frame number of a spritesheet

I am building a spritesheetbuilder class when I can pass in spritesheets that may have a different number of total frames and I would like to know is there a way to dynamically find out how many frames there are in a spritesheet and then loop through them all without...

Do you know inheritance in createjs?

Anyone have any experience with inheritance and createjs. I am trying to extend the createjs.Container class with my button class but I am getting the following error in my browser console. Eveything seems to be working fine which makes me think the problem must be when the page loads. I...

Easeljs snap to grid

I am building an app using HTML5 in which a grid is drawn. I have some shapes on it that you can move. What I'm trying to do is to snap objects to some points defined when you hover them while moving a shape. What I tried is to save...

TweenJS tweening the frames of a Sprite

I have a sprite that I want to animate using TweenJS. My first thought was to write something like this: createjs.Tween.get(mySprite).to({currentFrame:30}, 1000); Which didn't work. And simply writing... mySprite.currentFrame = 10; mySprite.currentAnimationFrame = 10; ...does not cause the sprite to update either. So I'm guessing these properties are get only?...

Bitmap rotation in circular path CreateJS Tweenjs

I'm trying to rotate a bird in circular path but the problem is the to method doesn't give much control to do the exact thing, I 'm trying to move the bird head up or down with the rotation. Here is my fiddle var tween = createjs.Tween.get(shape, {loop: true})...

How can I draw a line with easeljs-0.8.0.js?(createJs)

guys. I use easeljs-0.8.0.js to draw a line, but it doesn't work, can you help me? <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="lib/easeljs-0.8.0.js"></script> </head> <body> <canvas id="demoCanvas" width="1200" height="600"></canvas> </body> <script> window.onload = function() { var canvas = document.getElementById("demoCanvas"); var stage = new createjs.Stage(canvas); var lineShape =...

Flash to Html5 Canvas: slow vector graphics

I'm a Flash developer and have many games developed in the past. Now I'm going to convert them (if possible) to HTML5/CreateJS. I've used CreateJS toolkit that is built into Flash CC to convert my game. Converted game performs good on my Desktop, but unacceptable slow on any mobile device...

respect collisions throughout haxeflixel tween

I've implemented some seemingly basic tweens for a side-scrolling platformer in haxe using flixel.tweens.FlxTween. For example: public static function lunge(sprite: FlxSprite) { var deltax:Int = sprite.facing==FlxObject.LEFT?-50:50; return FlxTween.tween(sprite, { x:sprite.x+deltax,y:sprite.y-10 }, 0.10, { type: FlxTween.ONESHOT } ); } This works as expected -- the sprite lunges forward 50px and up...

How to convert Greensock's CustomEase functions to be usable in CreateJS's Tween system?

I'm currently working on a project that does not include GSAP (Greensock's JS Tweening library), but since it's super easy to create your own Custom Easing functions with it's visual editor - I was wondering if there is a way to break down the desired ease-function so that it can...

Libgdx tweening issue

I am creating a game and trying to set up a splash screen. Whenever I render the sprite that i want to tween to by using the sprite.draw method which looks like this: @Override public void render(float delta) { Gdx.gl20.glClearColor(0.2F, 0.5F, 1F, 1F); Gdx.gl20.glClear(GL20.GL_COLOR_BUFFER_BIT); tm.update(delta); cam.update(); sb.setProjectionMatrix(cam.combined); sb.begin(); Assets.splash_spr_bg.draw(sb); sb.end();...

createjs.Shadow alpha

Can the alpha of a drop shadow created with createjs.Shadow be controlled independently of the object it's attached to? I tried, simply: myObject.shadow = new createjs.Shadow("#000000",200,200,15); myObject.shadow.alpha=0.2; But that's a no go. Can't find anything in the API docs, but those are all pretty damn confusing to begin with....

Create a Sprite from raw RGBa data

I take several snapshots from playing video on canvas and thus getting raw RGB images into memory. In the documentations its states that Sprite class accepts a Spritesheet instance only. Is there any way to create a Sprite from raw RGBa? Or maybe convert that raw data into separate Bitmap...

Collision between two objects ndgmr.checkPixelCollision

I am trying to detect for a collision between two objects that are wrapped inside of two different containers. I am using a collision detection script found here I can get the ndgmr.checkRectCollision working but then the transparent areas of my bitmaps are also dectected in the the collision...

How to specify core project path in Libgdx Project Generator?

I am following a tutorial on making a flappy bird with the Libgdx framework. - I am currently on the step of adding the Tween Engine Library to my project. The is the algorithm that the author gave us to do 1.Open up the gdx-setup-ui jar, like we did in...

Createjs create timer clock for game

Does anyone know the best way to create a timer clock in Createjs please? I know I could do something in html and reference it with the DOMElement, but I have had a bit of a nightmare getting that to work in the past? Basically I need to show a...

Touch Events not registering for HTML5 Canvas Authoring using Flash CC

I have been having some issues when it comes to authoring HTML 5 Canvas in Flash CC, mostly as a result of the lack of information on writing JavaScript inside Flash. I have been converting an existing drag and drop .fla into HTML 5 with the hope of making it...

EaselJS cache Text object

I would like some help regarding caching Text objects using EaselJS library. I never fully understood how caching works, and i must be missing something really fundamental, because i cannot seem to make it work. Take the following simle example. this.label.cache(this.label.x, this.label.y, rec.width, rec.height); If you comment the line...

CreateJS - Measuring FPS in RAF (requestAnimationFrame) mode

I am using CreateJS in the RAF mode createjs.Ticker.timingMode = createjs.Ticker.RAF; How do I integrate with for instance stats.js measure the browser's FPS? Or is there any different, recommended way to measure the FPS with CreateJS? Thanks!...

how to clone Movieclip by Java script

i try to clone Movie clip that contain motion and graphics by java script i have the following error: Uncaught Movie Clip cannot be cloned. I wonder how this is accomplished?

createjs struggling with hitTest()

I am populating the canvas with small circles to form a shape and would like to destroy some of the circles where ever user clicks on the screen using the following function. dotsArray : is the array of all circles dot.ball: is the circle being drawn bomb: is the circle...

How to get container dimension?

How to get width and height of a movieClip in createjs? What I am doing is creating a shape, then convert to movieClip, and give it a name, I can access the instance using the name in js, but I can't get the width and height? Is there any idea...

Showing uncaught type error in CreateJS. Not showing any code is given below

its showing some error in createjs file. <html> <head> <title></title> <script src=""> </script> <script> var preload,cW,cH,winW,winH; var road,city1,city2,sky,build1,build2; window.onload = function(){ var canvas = document.getElementById("demoCanvas"); var stage = new createjs.Stage(canvas); cW=1200; cH=600; preload = new createjs.LoadQueue(true); var manifest =[{id:"ad_road",src:"road.png"}, {id:"ad_build1",src:"build.png"},...

Drag and drop doesn't work in chrome using EaselJS

I've been trying to implement some drag and drop functionality for a Bitmap in EaselJS. Anyways, it works just fine in Firefox and IE, but nothing happens when I try to run the code in Chrome. All of the code is local, as is the image. Here's a brief overview...

How to change the width of a movieclip in flash html5 canvas?

I was created a new project using flash cc html5 canvas and created a movieclip with 200px width and 200px height. I can able to get the properties using;. And I tried (); But it returns null. setBounds also not seems to work.

How should I create a responsive canvas with createJs to adapt different mobile device's screens?

I want to develop a html5 mobile game. As you know, the screens of mobile devices are different size, so I want to create a responsive canvas so that it can adapt different screen.

how to make tween work normally?

I am new to Tween, so i made the frame with 1 picture and tried to move it with Tween. Code: public class Fram extends JFrame { public Fram() { setSize(700, 500); setLocationRelativeTo(null); add(new Panol()); setVisible(true); } public static void main(String[] args) { new Fram(); } public class Panol extends...

Changing the length of a line renderer using DOTween

I am trying to change the length of my line renderer over time using DOTween. LineRenderer myLineRenderer = GetComponent<LineRenderer>(); myLineRenderer.SetPosition(1, new Vector3(x, 0, 0)); This code snippet changes the position of myLineRenderer to x. How can I use DOTween to set the position gradually to x over 1 second?...

CreateJS - d.mousedown.f error on hitAreas

While programming in CreateJS I have encountered a bug: Unhandled exception at line 13, column 10113 in 0x800a138f - Runtime Error JavaScript code: Can not retrieve "matrix" properties for undefined or empty appeal This bug appears only when I add a hit area into an image: function drawButton(e) {...

Delaying preloadjs for fixed time for testing

Is there a way in preloadjs to delay the loading of resources by say 2 seconds just for testing purpose to see the animation in action. As in localhost the files are loaded very quickly. Thanks in advance....

How to get real FPS with createjs

I created a game with createjs, but it runs very slowly on a mobile. I added a function to show FPS obtained with createjs.Ticker.getMeasuredFPS(). However, the FPS shown by the function is quite normal. I set the FPS to 60, and the result of getMeasuredFPS() is about 55-60, while the...

How to get a random color in my CreateJS shape?

I want to have a random color where "Crimson" is defined var stage = new createjs.Stage("demoCanvas"); var circle = new createjs.Shape();"Crimson").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild(circle); stage.update(); ...

Use of .apply() on CreateJS method bezierCurveTo gives error

I've got a problem using the apply() method from Function.prototype.apply(). I'm trying to create a series of drawings on my CreateJS stage by passing arrays of arguments to the bezierCurveTo method using apply(). This will allow me to loop through about a hundred such sets of arguments and draw a...

CreateJS - Issue loading sounds in IE11

I've run across a weird issue with sound file loading in IE11. I have a manifest of about a dozen images and then about 8 sound files. What's happening is versions of IE11 that have even the slightest modifications in the security settings are hanging up when trying to load...

Size limitation when drawing to CanvasRenderingContext2D

I HAVE HEAVILY EDITED THIS QUESTION TO PROVIDE MORE DETAILS I came across a limitation when drawing to CanvasRenderingContext2D via EaselJS framework. I have objects like this: but when the position of those objects surpasses couple million pixels the drawings start to crumble apart. This is the same object with...

Angular and CreateJS not finding the stage element

I have an Angular view that is inherited from an ng-view element. In the view file, I have a canvas. The code is controlled by a controller. What I want to do is call up a stage to add elements on the canvas. However when I run the createJS.Stage function,...

removeChild() not working using easeljs

I am using easeljs to create a stage and then i am putting tiles on the stage on random locations. When the user clicks on a tile, the tile must be removed from the stage. There are two problems that i am facing. First was that the mouse event was...

Createjs DomElement Create a Form

I am creating an app in Cordova and I'm using Createjs for all of my graphics. If I want to create a form so users can input their names - would I just use a textarea field (in a DIV) and just call it in a DomElement, or is there...

Moving an object in elliptical Path

In my LigGdx based game, I wish to move my Sprite in an elliptical path to reach the destination. I do not find any support in Universal tween engine. Sample of route example is shown below. Questions : Is there is any methods in UniversalTween Engine to have a elliptical...

D3 tween - pause and resume controls

I am trying to edit this d3 example. More specifically, I will try to apply the pause-resume controls of a pause resume guide in addition with a control bar like this we have under videos. At the end I imagine to have something like this: How can apply the pause...