Jump to content


Tweening with html5 canvas

Recommended Posts

I'm a little confused.  It appears that tweening properties like autoalpha and visible is using the DOM and css to do it's work?  Is there a way to disable that behavior and tween the properties like alpha and visible and whatnot like normal object properties?


We've got some code we're porting from as3 that uses greensock and we want to use the greensock.js to handle it, but we're not using the DOM, we're using a modern html5 rendering system, which doesn't seem to be working with greensock.js


Or am I misunderstanding what's going on?



Link to comment
Share on other sites

Hello craig.murray, and Welcome to the GreenSock Forums!


Just so we understand you are saying that you are using a HTML5 rendering system... so you are using canvas, right?


I made a codepen of a helpful video tut example by Lee Brimelow so you can see animating canvas using GSAP, in a live editable environment. Fork it and modify it to your needs to test with:


GSAP and Canvas example:

See the Pen ychlf?editors=101 by jonathan (@jonathan) on CodePen


And here is the link to that original video tut by Lee Brimelow using GSAP to animate canvas (scrub the video to around the 16:30 minute mark):




One of the great things about GSAP is it's ability to animate ANY object and/or property. When you ask GSAP to tween alpha or autoAlpha.. those are properties that tap into the CSSPlugin. Behind the scenes GSAP will detect that the property is CSS and wrap it in a css:{} object. If the properties were attributes than GSAP would tap into the AttributePlugin.


TweenLite is super lightweight in size. By adding other GSAP plugins like the CSSPlugin and the AttributePlugin, you can extend the functionality of GSAP. There are many other plugins that GreenSock has to leverage other functionality. TweenMax saves you the step of loading the common ones like CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin as well as EasePack, TimelineLite, and TimelineMax. Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more.


If this doesn't help.. could you please provide us with a code example, so we can get an idea the code you are testing that is giving you mixed results.


Also here is a great video tut by GreenSock on How to create a codepen example.


More info on the GSAP ticker property: http://api.greensock...Max.html#ticker


This way we can better help you!


Hope this helps? :)

  • Like 1
Link to comment
Share on other sites



Any chance you could post a reduced sample?.


Since you're using canvas in this one and want to point to different properties of the canvas elements you might want to explore GSAP's Kinetics JS plugin or the Attribute Plugin to work directly in the canvas element.




Mhh, not fast enough ;)

Link to comment
Share on other sites

As usual, jonathan and Rodrigo have things covered well, but I thought I'd chime in with a couple of other clarifications...


Originally, if you wanted to tween css-related properties (on a DOM element of course), you had to specify that by wrapping those properties in a css:{} object, like:

TweenLite.to(element, 1, {css:{width:200, height:100}, ease:Elastic.easeOut});

However, since animating DOM elements was such a common task, and a lot of people accidentally forgot to add the css:{} wrapper, we added some logic to the core engine that attempts to automatically add that wrapper for you if (and only if) the following conditions are met:

  1. The target is a DOM element (or a collection/array of them or a selector result like jQuery)
  2. The CSSPlugin is loaded
  3. There isn't already a css:{} object
  4. autoCSS isn't set to false.

This is important in your case because if you're trying to animate autoAlpha on a DOM element and you loaded CSSPlugin, it will automatically add that css:{} wrapper for you (to be helpful). I'm not sure why you'd target a DOM element if you're trying to animate it in a canvas framework, but maybe that's just how your roll :) 


If that's the case, there are several solutions you can choose from:

  1. Don't load CSSPlugin
  2. Add autoCSS:false to your tweens.
  3. Define a css:{} object in your tweens. This allows you to separate your CSS-specific values from other non-CSS tweening properties, like TweenLite.to(element, 1, {alpha:0.5, css:{width:200}});


Does that help?

  • Like 1
Link to comment
Share on other sites

Thanks for all the help guys, and the fast response.  You're correct in that we're using <canvas, but we are wrapping them in our own Texture, Image, Sprite, MovieClip, and so on.  So a .visible property, is defined on our own classes and used when rendering our the final <canvas image to display.  As a result, the CSS operating on the DOM doesn't play well with our own DisplayObject.visible property, since a DisplayObject in many cases is just a rect and a transform matrix pointing to a spritesheet.  


Option 1 from Jack said "Dont load CSSPlugin".  I'm pretty sure I never did that, so I'm not sure how to not do it.  Do I load a different on instead?


Also using autoCSS didnt seem to help:

TweenMax.to(spr, 2.0, { autoCSS:false, autoAlpha:0, yoyo:true, repeat: -1, onUpdate:function():Void{trace(spr.alpha);} } );


This does not change the alpha property.  Note in the above example spr is a Sprite(), my own class, which wraps a Texture.


This would be the same thing if I was using Pixi or Easel or some other display library.  Only different is these classes were authored by my team.


I should also mention that this is being written in Haxe, targeting both Flash and JS targets.  As a result I'd rather not have to look at every single tween that does autoAlpha and put autoCSS:false in them conditionally for JS target.  I'd rather it just work, which is why I favored the "dont load the css plugin" approach.  This is moot right now though, since the autoCSS:false doesnt seem to work in my situation.


Finally that codepen example:  

See the Pen ychlf?editors=101 by jonathan (@jonathan) on CodePen

If I try to tween the alpha property it doesnt do anything.  Same with autoAlpha.

Link to comment
Share on other sites

Well, TweenMax has CSSPlugin inside, so perhaps you just loaded that. 


Is it only the "visible" property that you're having trouble with? Is there a reason you're using autoAlpha (that's CSS-only anyway)? I don't have a clear vision of what you're trying to accomplish or where the trouble is occurring, so perhaps a simple codepen would help. 


In the mean time, to answer your original question, it may be best to simply set autoCSS:false, like:

TweenLite.to(object, 1, {alpha:0.5, autoCSS:false});

I would actually caution you not to use DOM elements for <canvas> animations anyway since that's probably a waste of memory/resources anyway but I can't say that for sure since I don't know exactly what you're doing. Generic objects (or a canvas framework) is typically best/fastest if you're not using CSS. 

Link to comment
Share on other sites

We're using autoAlpha because the as3 code we've ported to haxe uses it extensively to set the visible property for us.  When I tween alpha it works fine, but when i tween autoAlpha neither the .visible property nor the .alpha property are modified.

Link to comment
Share on other sites

Let me give a short example:


var img:Image = new Image(AM.getTexture("SceneBG"));
var spr = new Sprite();
spr.x = 100;
spr.y = 100;
(note this is haxe compiling to JS target, the Starling stuff is our port of Starling to haxe, compiled to JS, using canvas API instead of the shader library
//this works
TweenMax.to(spr, 2.0, { alpha:0, yoyo:true, repeat: -1, onUpdate:function():Void{trace(spr.alpha);} } );
//this fails
TweenMax.to(spr, 2.0, { autoAlpha:0, yoyo:true, repeat: -1, onUpdate:function():Void{trace(spr.alpha);} } );
//this fails
TweenMax.to(spr, 2.0, { autoCSS:false, autoAlpha:0, yoyo:true, repeat: -1, onUpdate:function():Void{trace(spr.alpha);} } );
Link to comment
Share on other sites

The problem is that you're literally trying to tween an "autoAlpha" property but it doesn't exist. You could just create a very simple plugin that'll handle this for you. Try adding this:

(window._gsQueue || (window._gsQueue = [])).push( function() {
	"use strict";
		propName: "autoAlpha",
		API: 2,
		version: "0.0.1",
		init: function(target, value, tween) {
			this._target = target;
			this._addTween(target, "alpha", target.alpha, value, "alpha");
			return true;
		set: function(ratio) {
			this._super.setRatio.call(this, ratio);
			this._target.visible = (this._target.alpha !== 0);


}); if (window._gsDefine) { window._gsQueue.pop()(); }

That's just a plugin that'll intercept any "autoAlpha" values and apply this custom logic which controls the alpha and on every render basically says "if the alpha is zero, make visible false, otherwise make it true". 


Does that do the trick? 

  • Like 1
Link to comment
Share on other sites

I'm sorry I didnt realize autoAlpha was a flash-only property.  Yes that plugin should do the trick for me in the JS target, thank you!

Link to comment
Share on other sites

autoAlpha isn't a default property in either JavaScript or ActionScript.


In JS, it's provided by CSSPlugin (included in TweenMax). The CSS properties it modifies are opacity and visibility.


In AS it's provided by AutoAlphaPlugin (automatically activated by TweenMax). The DisplayObject properties it modifies are alpha/_alpha and visible/_visible.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.