JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.js"></script>
<div id="container"></div>

JavaScript

var stage = new Kinetic.Stage({
    container: "container",
    width: 578,
    height: 300
});
//anchor 1
var an1 = {
    x: 100,
    y: 250
};

//control point 1
var cp1 = {
    x: 100,
    y: 100
};


var cp2 = {
    x: 400,
    y: 100
};

var an2 = {
    x: 400,
    y: 250
};

var layer = new Kinetic.Layer();

var pointer = new Kinetic.Polygon({
    points: [0, 0, 20, 40, -20, 40],
    fill: "#00D2FF",
    stroke: "black",
    rotationDeg: 90,
    x: 20,
    strokeWidth: 5
});


var group = new Kinetic.Group({
    x: an1.x,
    y: an1.y
})




group.setRotationDeg(-90);
group.add(pointer);
layer.add(group);



var circleCP1 = new Kinetic.Circle({
    x: cp1.x,
    y: cp1.y,
    radius: 10,
    fill: "blue"
});




var circleCP2 = new Kinetic.Circle({
    x: cp2.x,
    y: cp2.y,
    radius: 10,
    fill: "blue"
});


layer.add(circleCP1);
layer.add(circleCP2);


var arc = new Kinetic.Shape({
    drawFunc: function() {
        var context = this.getContext();
        context.beginPath();
        context.moveTo(an1.x, an1.y);
        context.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, an2.x, an2.y);


        this.stroke();
    },

    stroke: "#666666",
    strokeWidth: 1
});


layer.add(arc);




// add the layer to the stage

stage.add(layer);

var genObject = {
    x: 0,
    y: 0,
    rotation: 0
}


function draw() {
    group.setX(genObject.x);
    group.setY(genObject.y);
    group.setRotationDeg(genObject.rotation);
    layer.draw();
}

TweenMax.to(genObject, 1.5, {
    bezier: {
        type: 'cubic',
        autoRotate: true,
        values: [{
            x: an1.x,
            y: an1.y},
        {
            x: cp1.x,
            y: cp1.y},
        {
            x: cp2.x,
            y: cp2.y},
        {
            x: an2.x,
            y: an2.y}]
    },
    onUpdate: draw,
    delay: 1,
    repeat: 10,
    yoyo: true,
    ease: Power1.easeInOut
});


//can't seem to add 
//autoRotate:["x", "y", "rotation"]
//throws error
;