Search the Community

Hey all! So, I've given up trying to shoehorn GSAP into Adobe Animate. Big step! But now I am having issues with getting easelJS to play nice. See the attached CodePen. I am not sure what or who is fighting with whom or if I am just missing something. I am just getting back into GSAP/HTML/CSS after some time away so I am pretty sure that I am missing something. The codePen is me testing out if I can tint my image (what I really want is to mess with the brightness and exposure.) and doesn't work. I've tried uploading to codePen, running locally, firing up XAMMP and running a webserver locally and bupkis. the animation makes it past the easel but won't affect the tint. If any one has a moment please show me the error of my ways. I am pretty sure I am missing something that may be second nature to y'all. Please and thank you, Dez

Just curious if Draggable now works with EaselJS and Canvas? I found a post from almost 7 years ago where the answer was no, but that was 7 years ago and now I know that GSAP 3 is compatible with EaselJS I even use it inside of Adobe Animate which I do a lot of programming in. But my issues is If draggable is compatible now I am not sure how I can target my movieclips. Draggable.create(Main.MorningTasks.getChildByName(Root.ScheduledTasks.Morning[i].text), { type:'x,y', bounds: Main, onClick: function() { console.log(Task.name); }, onDragEnd: function() { console.log('Released ' + Task.name) } }); Following the example on Draggable Plugin Page, what I have I think should be right. Just looking for some guidance, I love GSAP and would love to be able to use draggable as well.

Hello, I'm using TweenMax to try to do a rotationX on a Bitmap that I have added to the stage using EaselJS. Does anyone know if it is possible? I have looked at this post but it has been over a year and I didn't know if something might have changed. http://community.createjs.com/discussions/easeljs/462-integration-with-greensock-tweenmax-tweenlite Here is the code: _rodHolderCover = new createjs.Bitmap("images/rodCover1.png"); stage.addChild(_rodHolderCover); _rodHolderCover.addEventListener('mousedown', handleKeyDown); then in the event handler I have this. TweenMax.to(_rodHolderCover, 1,{rotationX: 180}); rotation works great and so does x and y,

Hi, I try to animate a lot of canvas shapes created with Easeljs and animate with timelineMax. The animation is too slow, the demo is here http://codepen.io/nicmitch/pen/jyKPqy . I think I do something wrong but I do no what. Any suggestion?

Hi there! I have many shapes in EaselJS -not spritesheet, only shapes- (shape_1, shape_2, ..., shape_n) which are different frames of the same object and I want to animate them with TweenLite to display all the frames (1,2,3,4,...), like an animated movieclip in flash. I have seen that with CreateJS TweenJS works this code: this.timeline.addTween(createjs.Tween.get({}).to({state:[{t:this.shape0}]}).to({state:[{t:this.shape1}]},1).to({state:[{t:this.shape2}]},1).to({state:[{t:this.shape3}]},1).to({state:[{t:this.shape4}]},1).wait(1)); to display sequencially all the shapes... Is there any equivalent in TweenLite? Best Regards Rosa

Hi everyone, as intro I'll tell you that my job is to make banner, I produce hundreds every month and it's easier in flash as I've no coder formation. Many years ago I discovered GS and it changed my life! I learned the basics of tweenlite and adapted my workflow. But now with firefox blocking flash, followed by chrome (1 september 2015) it isn't a choice anymore, everything must go HTML5... It takes me a lot of time to do it in html5, it's always too heavy (50k in flash, 300 in html5) and everything isn't possible with my knowledge of js (light effects, particles, alpha masks...) But here I am with a big client which has a campaign running this summer and in september, with the news of firefox and chrome they want me to adapt everything, and there's a tint effect. I already adapted the animation, compressed the png with tinyPNG but the background must change color every 1500ms, I've setup an array of colors, i've setup the setInterval, I've read and tried some demos I found here in the forums but my js knowledge is really not enough to know what to do next, tried cache, tried loading filters... nothing works. Is there a cdn for ColorFilter and ColorMatrixFilter? So can someone check my files? The tint code is from line 94 to 114 so not very much Sorry for my english and I must still learn how to use codepen, but I have a campaign to adapt in 3 days so I couln't wait longer to ask for help. Thanks AT_300x250_html5_v2.zip

Hi I am trying to use your EaselPlugin, however no matter what I try I cannot tween filters b/c I get an error that the object needs to be cached. Specifically "Uncaught EaselPlugin warning: for filters to display in EaselJS, you must call the object's cache() method first. [object HTMLCanvasElement]" in Chrome. I tried out your sample code in the docs, and I get the same error, even tried using EaselJS's sample code and adding a filter tween on mouse over, with the same error. I'm pretty sure I loaded all the correct scripts. Can you help me figure out why it's not caching even when cache is there?!

Is there a way to reduce the strain on the processor when tinting or colorizing large images with EaselJS? I set the tint on the same image 5 times, but this can cause noticeable delay, particularly on large images. I tried staggering this operation using setTimeout, but it is still noticeable in some browsers (IE and even Chrome). For some reason Firefox handles it without any lockup. The lockup is brief (less than a second), but it is noticeable with large images (1000x600 for example). Just curious if there's any way to be more efficient about this.

I'm trying to tween, with GSAP an object made with easeljs. It is a ball whose opacity I'm trying to tween to 0; Although there are no syntax errors in the code the baLL is not tweened.. I include the complete code. What am I missing? Thanksball and mouse. with gsap1.htmlball and mouse. with gsap1.html

I was wondering if anyone could help me with an issue involving TweenMax and Easeljs. We're nearing completion of a game built in EaselJS, and just in the device testing phase. We're finding on some lower end devices, such as the iPhone 4 (iOS7), that whenever the framerate drops from our standard of 24 to around 18 or less, any TweenMax tweens currently running will appear to run at an incredibly low framerate compared to anything else. Other non-tweened movements will continue as you would expect at the framerate drop, but we'll only see as little as three frames in any one TweenMax tween - the start properties, maybe one or two frames somewhere in the middle, and eventually the end properties applied to the object, and that's about it. Very odd. It makes it look like the game is struggling much more than it actually is, as everything not tweened is often running at a reasonable rate. Originally we added an event listener to TweenMax's ticker, telling it to update the canvas on tick but this resulted in a lot of performance issues, as it was trying to update the canvas more often than it needed to. So now we just update the canvas on the EaselJS ticker update. I've since tried setting the TweenMax ticker's fps property to whatever the current easel framerate is, and this is adjusted each frame. This generally improves the animation speed of the tweens quite a bit, but they're still not updating as smoothly as any other animations we have playing on screen during these slightly more intensive moments. The canvas is continuing to update fine, so it seems to be that TweenMax isn't updating the values as frequently as it should be. Does anyone have any idea what might be happening? Is there a relatively easy way to manually update the progress of the tweens, so that the canvas ticker and the TweenMax ticker can be properly synced? Thank you

So I realise that transformOrigin is a CSS property and thus don't expect it to work when tweening scaleX and scaleY of an EaselJS Bitmap, but is there any way I can achieve the same ends? Tweening using a top left origin isn't always ideal. Thanks

Hi, Thank you for your library. I have been testing out and trying to create a infinite scroll of images in EaselJS with TweenMax and TimelineMax. However, I always see gaps in images scrolling from the left and also a gap in the loop. I saw a similar question on the semless looping that has the suggestions for css trick. I am not sure how to get the effect with EaselJS canvas. Here is my code: tweens = [] for key, manifest of manifests break if index >= NUMBER_OF_ITEMS imageContainer = new createjs.Container(); imageContainer.x = -itemX; y = Math.floor(Math.random() * (displayHeight - itemY - 10)) y = y + (itemY / 2) if y < itemY imageContainer.y = y; imageContainer.name = key tweens.push(TweenMax.to(imageContainer, 50, { x: displayWidth + itemX / 2, ease: "linear" })) stage.addChild(imageContainer); preload.loadManifest(manifest); index++ mainTimeline.appendMultiple(tweens, 0, "normal", 8.5) I would repeat this append each time a set of images are loaded into the canvas. But the two problems above are always present. Is there a way to overcome those? Also, related to this question. I have a drag and drop on the image. I pause the timeline when drag and drop is performed. However when the timeline plays again, it always go back to the same previous postion. I have this to set the new position but it doesn't seem to do anything: mainTimeline.set(o, {x: newX, y: newY}) Is there a way to set the position of the object in the timeline that would conitnue the flow? Thank you for your help.

I have a problem, and can't tell if this is EaselJS or GSAP, but I think answer can be useful for users of GSAP . I'm loading bunch of images, and then trying to rotate them around center, but sometimes it doesn't work, I mean - they are not rotating around center, but 0,0. I'm not sure what I'm doing wrong, could someone help me? I'm loading bunch of images like that: var img_all = 2; cloud1.src = "/images/cloud1.png"; cloud1.onload = imageLoader(img_all); cloud1 = new createjs.Bitmap(cloud1); cloud2.src = "/images/cloud2.png"; cloud2.onload = imageLoader(img_all); cloud2 = new createjs.Bitmap(cloud2) And here is my function that tries to set reg. points after all images will be loaded: var img_comp = 0; function imageLoader(img_all) { img_comp++; if(img_all == img_comp) { cloud1.y = 350; cloud2.x = 400; cloud2.y = 300; cloud1.regX = cloud1.image.width/2; cloud1.regY = cloud1.image.height/2; cloud2.regX = cloud2.image.width/2; cloud2.regY = cloud2.image.height/2; TweenMax.to(cloud1, 30, { rotation: 360, repeat: -1, ease: Linear.easeNone }); TweenMax.to(cloud2, 40, { rotation: 360, repeat: -1, ease: Linear.easeNone }); TweenMax.ticker.addEventListener("tick", draw); } } But still sometimes, they are just rotating around 0,0 instead of center, what can be done better? Regards.

Hi Team, I am a wireless specialist by trade and a very amateur programmer in my spare time. So I may ask some funny questions and my understanding may not be on par with most of you. I am trying to program a basic asteroid avoidance game in easeljs. Basically I am drawing 10 asteroids on the canvas and making them move towards the left and offscreen. I will later initialise them offscreen to the right, move left and recycle them once they hit the left edge of the canvas to give a continuous asteroid field effect. Underneath is my code. All is working except my tick function (animate function). The tick function is actually part of createjs.Ticker class, so I am not actually calling this function with tick() anywhere in my code as the createjs.Ticker.addListener(this) is doing the work. The stage.update(); call in the tick function redraws the canvas. This is working but every frame it is not animating my asteroids. The for loop before the stage.update() seems to not do anything ! Not sure how to console debug it ! The Documentation surrounding the ticker class is very confusing. I have gone through a number of demos and they have similarly used the ticker function with bitmap image instead of circles. Could any of you who have some Easeljs experience please give me a brief rundown on how to fix the issue, how to correctly call the ticker.addlistener function and if there are any rules with adding additional functionality to the tick() function as the easeljs library has a number of attributes already defined in the tick() function. I could write my own animate function but I would rather use the Easeljs way for now as it cuts down on the code substantially. Thank you for taking the time to read this post. Hope you have a great evening and Thank you in advance. Emanuel! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Easel Intro</title> <script src="js/easeljs-0.6.0.min.js"></script> <script> var canvas; var stage; var Asteroid; var numAsteroids; var radius; var asteroidsARRAY; var canvasWidth = 800; var canvasHeight = 600; function init(){ canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); drawAsteroids(); } function drawAsteroids(){ var container = new createjs.Container(); stage.addChild(container); var numAsteroids = 10; // Number of Asteroids to be reproduced on screen. asteroidsARRAY = []; //Array to store Asteroids. for (var i=0; i<numAsteroids; i++){ //for loop to draw 10 Asteroids on canvas. radius = 5+(Math.random()*10); templateAsteroid = new createjs.Graphics(); templateAsteroid.setStrokeStyle(1); templateAsteroid.beginStroke(createjs.Graphics.getRGB(0,0,0, .7)); templateAsteroid.drawCircle(0,0, radius); Asteroid = new createjs.Shape(templateAsteroid); Asteroid.x = Math.floor(Math.random()*canvasWidth); Asteroid.y = Math.floor(Math.random()*canvasHeight); Asteroid.speed = (Math.random()*5)+2; container.addChild(Asteroid); Asteroid.name = "asteroid"+i; asteroidsARRAY.push(); } stage.addChild(Asteroid); createjs.Ticker.addListener(window); } function tick(){ var l = asteroidsARRAY.length; for (var i=0; i<l; i++) { var a = asteroidsARRAY; a.x -= a.speed; document.write(a.x); } stage.update(); } </script> </head> <body onLoad="init();"> <canvas id="canvas" width="800" height="600"> <!-- Insert fallback content here --> </canvas> </body> </html>

Hello, I've been working with the Javascript version of GreenSock v 12, EaselJs, and the Canvas element. I know that the Actionscript version of Greensock has a CircluarPath2D or something something like that, but I've searched Google and the Greensock forums and cannot find a way of actual animate the drawing of a shape like in Flash. I've seen tons of examples on "Transforming" shapes, and the drawing of shapes and then put them on the screen, but not any actual on-screen animated drawing of a shape/bezier. I also, looked into svg, but did not see an option there. Is it possible to do this without using masks? If so, please provide a very simple example or send me a link to how to do this Thanks for viewing, any help will be greatly appreciated.

As a Flash Developer coming into Canvas, I'm loving GSAP. But I was amazed how slow it was just tweening the color of a EaselJS object. Experiment tweening alpha and scale: http://antoniobrandao.com/canvas/ Experiment like the above, but also tweening the "tint" of an easelJS Shape http://antoniobranda...vas/index2.html It completely destroys it!!! Am I doing it wrong or is this just slow? Check the source code in the experiments. Any help appreciated!

I'm still learning and searched but didn't find my issue. I'm not sure if this is coder error or not possible... I'm very familiar with the AS3 version of TweenMax/Lite but still learning JS/GSAP/etc. I used Flash CS6 to layout my and create my objects. I've successfully integrated GSAP for the tweening engine but autoAlpha is not working for me. Basically I want to use autoAlpha on an object. Here is the newly created object in my .js file (code simplified to highlight issue): (lib.map5 = function() { this.initialize(); // popups this.ptInfo_A = new lib.ptInfo_A(); this.ptInfo_A.setTransform(176.5,141.5,1,1,0,0,0,134.5,73.5); this.addChild(this.ptInfo_A); }).prototype = p = new cjs.Container(); p.nominalBounds = new cjs.Rectangle(42,68,469,201.5); In another JS file, where I setup interactions and initial stage properties, I'm trying to do this but it's simply not working: TweenLite.to(exportRoot.ptInfo_A, .2,{{css:{autoAlpha:0}}}); I've been able to "manually" make the object do what I want it to do but it seem clunky using anonymous funcions: TweenLite.to(exportRoot.ptInfo_A, .2, {alpha:0, onComplete:function(){exportRoot.removeChild(exportRoot.ptInfo_A);}}); Does anyone have any insight into this? Is autoAlpha not possible on objects? Thanks in advance! (I've attached the files if anyone if feeling especially ambitious to help!) map5_deploy.zip

Hello I'm trying to tween a value of an object like this: var _obj = {v:0}; TweenMax.to(_obj, 1, {v:100, ease: Linear.easeNone, onUpdate:onTweenUpdate}) } function onTweenUpdate () { console.log(_obj.v) } This works fine but what it actually needs are rounded values. I thought "roundProps" would come in handy but the following change causes an error in TweenMax.js: TweenMax.to(_obj, 1, {v:100, roundProps:"v", ease: Linear.easeNone, onUpdate:onTweenUpdate}) Is this code wrong or does "roundProps" not work that way? What I actually would like to do with it is tweening the "currentAnimationFrame" of an EaselJS BitmapAnimation. I used the "onTweenUpdate" function from the example above together with Math.round() as a workaround. But it would be much nicer to tween the currentAnimationFrame directly. Any ideas anyone? Cheers Henry