Jump to content

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

Search the Community

Showing results for tags 'canvas'.

  • 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



  1. Hey guys! I have something I'd like to implement which you could consider to effectively be a floor plan for a venue. I've advocated GSAP for a while now and so thought I'd explore what was available for it. I like the look of draggable a lot. Effectively I'd like some advice. I want to create an area on the screen and that can zoom/pan and allow me to add elements to a grid in the form of differently shaped tables. The size of the floor can grow (ad infinitum) depending on the positioning of tables, but there will always in practical terms be boundaries to the floor. A table may have
  2. Hello, We've been scratching our heads on the following problem for a few days now and wonder if someone can help. We have a series of elements (dots in this case) and attempting to create a sort of fisheye effect where the dots at a certain point in the screen get larger. I've created the following Codepen, that shows the type of effect we are trying to achieve. (Though the grouping needs tightening up) https://codepen.io/Seanom/pen/qaKBXX I toyed with the duration but found that if the user scrolls too fast then events are skipped. I really like the animation effect on the
  3. Any ideas on improving quality of text in an HTML5 Canvas ad from Adobe Animate CC? All text looks a bit fuzzy when publishing. Google search mentioned stage.snapToPixelEnabled = True; That helped a bit but our Campaign Managers are expecting a higher quality. There are tons of other scripts to scale the stage up and down which are actually mystifying to me. Not sure where to plug these methods into the .html and .js that Animate CC generates. Thanks in advance for the amazing brains out there. -Ray
  4. Recently, we have moved our bespoke animations away from using DOM elements to using Canvas, due to memory issues when running on low to medium powered devices such as Chinese Android "sticks" and Google ChromeBit. Everything went smoothly, until we introduced videos. We have found a bug where a video plays on the first load of the page, but then after subsequent refreshes, the video will not play. Instead it just shows the very first frame. What is peculiar is that the video is loaded into its DOM element (used by Canvas to grab the video) and the frame even shows on the Canvas it
  5. HI! I want to convert timeline lite elements with their animations into canvas animation, I mean the whole dom element and its children that contains timeline lite animations. an animation like this one http://codepen.io/ihatetomatoes/pen/QboVVV is there way to do that? I've found some libraries that only take a screen shot of the page but no animations.
  6. Hello everyone, I am working on a project where I mix PixiJS and GSAP to animate my canvas' content and I am encountering an issue with the BezierPlugin, more specifically its autoRotate feature. For some reason it goes crazy when I enable it. The bezier path itself is correctly respected but the Sprite (which is a car in my app) rotates a few times on itself instead of slightly turning to indicate it's following the path. The way it rotates makes me believe it might be something related to the center of origin but I can't figure out why or how to fix it (I imagine it might also be mo
  7. Hi! We have been working on a new way to export faster, smaller HTML5 from Adobe Animate. As we are nearing launch we would love to hear about your experiences with Flash and Animate for HTML5. https://www.surveymonkey.com/r/Z3DNNQB Be sure to enter your email for a chance to download the product before launch!
  8. Hi, We created a small game, where we tween a very long image (18000px) on the canvas. It has good performance on Chrome with a strong pc. But the tween is vey laggy on standard laptop or Firefox / IE. And I think this is relevant snippet: function init() { canvas = document.getElementById("bg").getContext("2d"); img = new Image(); img.xpos = 0; img.ypos = 0; img.src = "img/bg.jpg"; img.onload = function() { animate(); } $('#trigger').click(function() { TweenMax.to(img, 60, {xpos:-17807, ypos:0, force3D:true, ease:Linear.easeNone});
  9. Hi, Folks. First of all, thank you so much for all these years. You rock! I am trying to make a "slider" that goes through a path made by bezier curves. My first attempt was build the animation and controll it with TimelineMax. So, when I click and drag an area I want to control a div through this curve. So, my first problem: I do not know how to take the path that BezierPlugin made internally and draw it on canvas. I know there is the method BezierPlugin.bezierThrough. It returns an Object with two Arrays, x and y. But inside these Arrays the objects have the properties a, b,
  10. I've been trying to animate an image that I set up in canvas with Easel JS, and have no success. I was curious if anyone had advice on how to do this? Also, I am under the impression that animating in canvas will give me a significant performance increase, as opposed to inside the DOM. I was curious if there was a good resource I could be pointed to, to help me better understand GSAP + canvas.
  11. A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr
  12. I'm not 100% sure this is the correct place to post this. I have a question about Flash Pro CC 2015 when using the canvas file type. When I create a movieclip and set the registration point to the top left corner and place it on the stage. When I change the properties in the Properties panel and set the x and y values to 0 it moves to the top left corner like it should. But when I set these values using javascript this.mc.x = 0 and this.mc.y = 0; It uses the center point of the movie clip. So the top and left half of my mc are off of the stage. I'm not sure why this is. Does it have s
  13. I'm trying to change the fill color of a movieclip I created using Flash Pro with the canvas tag / Create JS. This is what I'm trying: TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}}); TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}}); But nothing seems to be working. I saw an older post in the from (2012) that was using : TweenLite.to(circle, 3, {y:150, easel:{tint:"#0000FF", tintAmount:0.5}}); That also doesn't seem to do anything. I don't see any errors so I'm guessing this line is just b
  14. violacase

    Canvas or SVG?

    Hi folks, Not a specific GSAP related question I guess, but perhaps still a bit... In this forum a lot of focus is put on SVG manipulation and just a little bit on canvas. I would like to know what display 'system' javascript experts would choose in the year 2016 and why if they would start a blank web page project with lots of GSAP. SVG or Canvas?
  15. Hi All, I am trying to animate a mask in a Flash HTML5 Canvas document using TweenLite. I am trying to animate a symbol that is in a mask layer. But when I try I get a JavaScript console error: TweenLite.min.js:12 Uncaught Cannot tween a null target. My other objects animate fine. I believe I have all the proper .js files loaded in the HTML (easelJS, tweenJS, movieclip, preloadJS) and the Tweenlite files (CSSPlugin, EasePack, Tweenlite). Here is the code I used that throws the error. TweenLite.to(this.leftYellowStripeMask, .5, {y:-9, ease:Quad.easeOut, delay:.3}); I'm gues
  16. Hello! I'm creating a banner using Flash CC HTML5 canvas. What I do is adding animation code to each frame. After it completes I want the next frame to be played. I included two libs into the HTML file: EasePack.min.js TweenLite.min.js So at the current frame I am writing the following code (source file: test7.zip ): this.stop(); TweenLite.to(this.target, 1.35, {delay: 0.1, y: 180, ease:Elastic.easeInOut, onComplete: pplay } ); function pplay(){ this.play(); window.alert('123'); }; The frame is animated but it stops at the end instead of going to next frame.
  17. Quick question. I was wondering if is possible to create an highlight effect in top of 2 draw canvas images. I'm creating a beaker with a back and front image. I would like create a highlight effect. Any codePen or tutorial about it? or this is not possible with GSAP?
  18. Hi! As discussed in this forum before Flash is dead and I have to switch to HTML5 banners. I have tried different solutions and now planing to use Flash CC html5 canvas animation until I learn how to make perfect hand coded and animated banners with Greensock. As for the background I have previously used Greensock (I think it was the same) library but after years passed without banner work I didn't use it and now in this summer I just started again with regular tween and timeline. But now my biggest problem with the change is not the file size or how to animate. I am in trouble of add
  19. I'm currently building an animated banner using Canvas. I've got coloured SVG dot graphics set as Image() objects on my canvas. I've been animating the dots on the canvas along x,y paths and I'd like the dots to fade out by the end of their animations... I can't seem to figure out how to animate opacity values in canvas using TweenLite... In fact, I'm not even sure how to animate opacity on the dots at all, even through plain JavaScript.. I haven't been able to find any answers on Google.. Does anyone here know how to achieve this desired effect? (preferably using TweenLite) For context sa
  20. Hi, I have a project where I need to remake a large number of old Flash files in a touch friendly format, by building them with canvas, javascript and so on. I was hoping to figure out how to use the Flash to html5 canvas approach to do this, and make use of GSAP as well. At the moment I am still testing things out, and I am finding that tweens done in my Flash file with createjs work predictably, but those done with gsap are less reliable. Some tweens work reliably (eg rotate) others (eg scale) have no effect. Also, sometimes the entire file breaks down for no obvious reason (at least to
  21. Hello everyone, Im trying to generate particles in HTML5 canvas and then fade them in or out with random delay and animation duration time. Ultimately creating the effect of stars appears in the sky. So far i've been able to generate the particles with rgba() colour but was unable to animate the alpha value. In the Codepen provided if you change line 18 from _this.alpha = 0; to _this.alpha = 1; you will see that the particles are actually being drawn on the canvas. Im not sure if i can modify directly an rgba value of a canvas shape with TweenMax or i need another approach.
  22. Hello again! What would you think is the best way to animate a huge circle with GSAP? I've tried : Changing the width/height of a div with border radius (small to big) Changing the scale of a div with border radius (big scaled down to small and then scaled back up) Changing the width/height of a svg circle For example, http://plnkr.co/edit/vgmRe65FmzmzpcpHR7KM in full screen. But the animation is not really smooth on Firefox. I was wondering if my only option is to use a canvas element. Any ideas? Thanks
  23. How can I create a randomly road with GSAP? My idea is that a car moves for him in a canvas element (With Phaser Framework) When the car is off the road I want this stalling. Sorry for my bad english Regards, Nicholls
  24. What are the main advantages to using canvas rather than moving around divs?
  25. Hi, I am working on a project, in which I am trying to move 12 SWF files simontaneously with the help of (TweenMax.allTo). but when I try this in browser, many frames are skipping during movement. size of each SWF is 2500X2400 px and I'm using 4 MB jpg image in SWF as backfround. Code : TweenMax.allTo([CONTAINER_1, CONTAINER_2], groundFriction, { x:xPos, y:yPos} ); Both the containers are containing 6 SWF files. xPos and yPos is calculating dynamically on keyboard key down event, and I am using ENTER_FRAME to move the canvas. If someone knows how to deal with it, please help me