Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'easeljs'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 19 results

  1. 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() { consol
  2. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Adobe Animate CC 2017 made big improvements to how external libraries like GSAP can be loaded into your projects. The video below shows everything you need to do to get up and running quickly. This video is intended for audiences that are familiar with working with Animate CC and have some knowledge of the GSAP API. Add GSA
  3. You can animate ANY numeric property of ANY JavaScript object – it’s not just for DOM elements. So yes, you can animate canvas objects, EaselJS assets, and pretty much anything JavaScript-related. In fact, GSAP even has an EaselPlugin to make it easier to animate EaselJS properties. If you need to run logic after each refresh (like to redraw things on the canvas), either use an onUpdate on the individual tween/timeline or add a “tick” event listener to the core Ticker that drives the platform.
  4. 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. TweenM
  5. 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?
  6. 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...
  7. 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...
  8. 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
  9. 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.
  10. 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
  11. 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
  12. 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
  13. 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 cr
  14. 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 cr
  15. 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 fun
  16. 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 possibl
  17. 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!
  18. 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.ptInf
  19. 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 i