Jump to content


Animating SVG Image Opacity in Canvas With TweenLite

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 sake, here is a small snippet of the code I'm currently working with:

function drawDot()
ctx.drawImage(orDt, orDtObj.x, orDtObj.y); //draw an orange dot in the canvas
function reAnimateDot() //set dot back to it's origin
orDtObj.x = xDotOgn;
orDtObj.y = yDotOgn;


function animateDot()
var angle = Math.random()*(Math.PI*2);

console.log('>> the angle : '+angle)

var radius = 100;

//find the end point for our dot
var xEnd = orDtObj.x + radius * Math.cos( angle );
var yEnd = orDtObj.y + radius * Math.sin( angle ) ;

orDtObj.xEnd = xEnd;
orDtObj.yEnd = yEnd;

//reDrawUnit is a function that redraws everything during animation (refresh/frame-rate function)

TweenLite.to(orDtObj, 2, {x:orDtObj.xEnd, y:orDtObj.yEnd, autoAlpha:0, ease:Quad.easeOut, onUpdate:reDrawUnit, onComplete:reAnimateDot});

Link to comment
Share on other sites

Hi cmaxster,


I may be wrong, but your problem may be a lack of the CSSPlugin with Tweenlite. It's automatically loaded with TweenMax, but with Tweenlite, you'd have to load the CSSPlugin separately. I'd give it a try.  :-)

  • Like 1
Link to comment
Share on other sites

There's a globalAlpha property you can tween on your canvas context, or you can convert the pixel color values into an RGBA format and tween the alpha component. Here's some good tutorials on manipulating images.




  • Like 2
Link to comment
Share on other sites

Hello cmaxster, and Welcome to the GreenSock Forum!


Here is an example that uses GSAP to animate an image in canvas using the globalAlpha property


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


You can create the initial value of your globalAlpha property variable. Then place your desired globalAlpha variable in your to() tween. Then place the output within your animateDot() function before your canvas drawImage() method.


Also a codepen example would be really helpful in seeing your code in action to better help you.


Here is an video tut by GreenSock on how to create a codepen example demo.






Hope this helps :)

  • Like 2
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.