How to create a fade in and fade out using CreateJS

Question

im new to createJs and would like some help on something I got stuck on. What im trying to achieve is a fade in and fade out animation but I cant seem to get it right or even know if what im doing is in the right direction. Here is the code:

https://jsfiddle.net/kw4ubpxf/

var stage = new Stage($('canvas')[0]);


var car = new Bitmap('http://i.imgur.com/y0Yp1wp.png');
stage.addChild(car)
car.x = 20; car.y = 20; car.alpha = 0;

stage.update();

Ticker.addEventListener("tick", tick);

createjs.Tween.get(car).to({alpha: 1},5000);

function tick(){
        stage.update();     
  }

I need the car image to fade in, stay for 5 seconds and then fade out. Any help would be greatly appreciated.

score 0 · Answer 1 · answered Aug 10 '17 at 19:43

You can set the alpha of any DisplayObject to fade it out.

car.alpha = 0.5;

It is not too hard to fade it out over time manually, but since you are using EaselJS, you might as well use TweenJS to animate it.

createjs.Tween.get(car)
    .wait(5000)
    .to({alpha: 0})
    .call(completeHandler);

Hope that helps!

How to create a fade in and fade out using CreateJS

1 Answers1