Manual rotation in easeljs/tweenjs

Question

I've been having problems with rotating an object manually. What I want is for when a person double clicks on the object, it rotates by 20 (either side, I'm not fussy) once. If they click again, it rotates again by 20. However, it won't rotate at all at the moment (double click, or not). What am I doing wrong here?

var tri2 = new createjs.Shape();
tri2.graphics.beginStroke("#000").beginFill('#000').drawPolyStar(0, 0, 50, 3, 0, 270);

var draggerTri2 = new         createjs.Container();

draggerTri2.x = Math.random()*100;
draggerTri2.y = Math.random()*100;
draggerTri2.addChild(tri2);  

stage.addChild(draggerTri2);

draggerTri2.on("pressmove",function move(evt) {

evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;

stage.update();   

});

draggerTri2.on("dblclick", function rotate(evt) {

var tween2 = new TWEEN.Tween(draggerTri2,dataset)
          .to({left: "-20"}, 2000)
      .repeat(0)
      .onUpdate(function(draggerTri2){
        draggerTri2.left = Math.round(draggerTri2.left);
      })
     .start()

stage.update();   

 });

  stage.update();

Codepen link: https://codepen.io/AoifeMcNeill/pen/XqyWej?editors=0010

Answer 1

Your tween code is NOT TweenJS code. If you double click, you get a console error that TWEEN is not defined.

TweenJS code would look like this:

draggerTri2.on("dblclick", function rotate(evt) {
  var tween2 = createjs.Tween.get(draggerTri2, {override:true})
  .to({rotation:draggerTri2.rotation+20}, 2000)
  .on("change", function(event){
    var tween = event.target,
        draggerTri2 = tween.target;
    draggerTri2.rotation = Math.round(draggerTri2.rotation);
    stage.update();  // Only do this if nothing else is updating your stage
  });
});

You an also use the RelativePlugin to rotate relative to your current rotation, instead of to an absolute number:

RelativePlugin.install();
var tween2 = createjs.Tween.get(draggerTri2, {override:true})
    .to({rotation:"+20"}, 2000);