Easel.JS and GSAP - tweening curves.

[FingerPuk]

Hi all.

 

I'm trying to get GSAP to tween properties of an EaselJS bezier curve.

 

Code is here:

 

<script>
      function init() {
        var stage = new createjs.Stage("myCanvas");  //create the stage
        var circle = new createjs.Shape();  //create a shape
        var line = new createjs.Shape();  //testing lines - first create a shape
        var l = line.graphics;  //then the line graphic
        var animateLineTest = 100;  //then a point to test animation


        circle.graphics.beginFill("black").drawCircle(0, 0, 50);
        circle.x = 100;
        circle.y = 100;
        stage.addChild(circle);


        l.setStrokeStyle(5, 'round','round');
        l.moveTo(100, 100);
        l.beginStroke("#333");
        l.beginFill();
        l.bezierCurveTo(100, animateLineTest, 388, 10, 388, 170);
        stage.addChild(line);


        circle.on("mousedown", function(){
          TweenMax.to(circle, 1, {alpha:0, onUpdate:stage.update, onUpdateScope:stage});
          TweenMax.to(animateLineTest, 1, {value:150, onUpdate:stage.update, onUpdateScope:stage});
        });


        stage.update(); //redraw the stage
      }
    </script>

However I get an error: TypeError: Attempted to assign to readonly property

 

Any thoughts? Cheers.

 

[OSUblake]

Put it in a object like

var animateLineTest = { value: 100 };

[FingerPuk]

 

Put it in a object like

var animateLineTest = { value: 100 };

Cheers. No error but also no animation.

 

Pen: 

See the Pen EjWVze by anon (@anon) on CodePen

[OSUblake]

I'm not familiar with Easel, but it looks like bezier properties don't exist on the line object like alpha does on the circle. It's showing a command for the line in the console, whatever that means. Maybe somebody else who is familiar with Easel can help you out. I just updated the line in the callback to animate it.

 

See the Pen MwpKjX?editors=001 by osublake (@osublake) on CodePen

[Carl]

Thanks for providing the CodePen demo. Very helpful.

 

The issue is that you are using a certain value to draw (and render) a line. Then you tween the value but don't do anything that redraws the line.

You will need your onUpdate to repeatedly clear and redraw the line like so:

circle.on("mousedown", function() {
     TweenMax.to(circle, 1, {
       alpha: 0,
       onUpdate: stage.update,
       onUpdateScope: stage
     });
     TweenMax.to(animateLineTest, 1, {
       value: 250,
       onUpdate: drawThing
     });


   });


   function drawThing() {
     l.clear();
     l.setStrokeStyle(5, 'round', 'round');
     l.moveTo(100, 100);
     l.beginStroke("#333");
     l.beginFill();
     l.bezierCurveTo(100, animateLineTest.value, 388, 10, animateLineTest.value, 170);
     //stage.update() //hmmm seems unneccessary here.
   }

http://codepen.io/GreenSock/pen/zGZrBM?editors=001