Animating SVG Image Opacity in Canvas With TweenLite

[cmaxster]

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; 


                animateDot();

            }


            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});

            }

[PointC]

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. 

[OSUblake]

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.

 

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

https://codepo8.github.io/canvas-images-and-pixels/

[Jonathan]

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.

 

Reference:

 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha

 

Hope this helps