JSFiddle - React, Tailwind, and code Playground

by jaibuu

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>
<h1>Cubic Bezier Animation with GreenSock's BezierPlugin</h1>
<div id="container"></div>
<p>Drag the dark blue control points</p>

<ul>
    <li>Animation driven by <a href="http://www.greensock.com/v12/" target="_blank">GreenSock Animation Platform v12</a>.</li>
    <li>Cubic bezier motion made possible thanks to <a href="http://forums.greensock.com/topic/6213-bezier-in-javascript/page__p__22862#entry22862" target="_blank">GreenSock's BezierPlugin</a></li>
    <li>Interactive bezier path created with <a href="http://www.kineticjs.com/" target="_blank">KineticJS</a>.</li>
   
    
    <li>The BezierPlugin was only released for testing purposes yesterday (7-16-2012). Feel free to share your questions and comments in the <a href="http://forums.greensock.com/topic/6213-bezier-in-javascript/page__p__22862#entry22862" target="_blank">GreenSock support forums</a>. </li>

<li>Learn more about GSAP12 and download library at <a href="http://www.greensock.com/v12/" target="_blank">http://www.greensock.com/v12/</a>.</li>    
    
    <li>Although this demo uses canvas and KineticJS, the BezierPlugin has no external dependencies. You can animate DOM elements along bezier paths too! In fact you can tween any propery of any object with the plugin. </li> 

    <li>Read about all the capabilities of the Bezier Plugin in the <a href="http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html" target="_blank">documentation</a>.</li>    


 <li>Of course I found this much cleaner approach to <a href="http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/" target="_blank">creating interactive bezier controls</a> after I whipped through this experiment ;) </li>
</ul>
<p class="me">demo created quickly by Carl Schooff</p>

CSS

#container{
width:600px;
    height:450px;
    background-color:#dfdfdf;
}


.pointer{
cursor:pointer;
}

body{
font-family: 'Arial'; 
}

h1{
font-size:26px;  
margin:20px 0px;    
}

ul{
margin-top:20px;
}

li{
padding:5px;
}
.me{
   margin-top:40px;
font-size:12px;
    color:#aaa;
}

JavaScript

var stage = new Kinetic.Stage({
    container: "container",
    width: 600,
    height: 450,
    fill: "#dfdfdf"
});

//anchor 1
var an1 = {
    x: 100,
    y: 250
};

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

//control point 2
var cp2 = {
    x: 400,
    y: 100
};

//anchor 2
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,
    alpha: .8,
    x: 20,
    strokeWidth: 2
});

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

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

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

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

var circleCP1Line = new Kinetic.Line({
    points: [an1.x, an1.y, cp1.x, cp1.y],
    stroke: "blue",
    alpha: .5,
    strokeWidth: 1
});

var circleCP2Line = new Kinetic.Line({
    points: [an2.x, an2.y, cp2.x, cp2.y],
    stroke: "blue",
    alpha: .5,
    strokeWidth: 1
});



group.add(pointer);


layer.add(arc);
layer.add(circleCP1);
layer.add(circleCP2);
layer.add(circleCP1Line);
layer.add(circleCP2Line);
layer.add(group);
stage.add(layer);

//store position and rotation values
var genObject = {
    x: 0,
    y: 0,
    rotation: 0
}


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

var tween;

// -- Animation 
function resetTween() {
    tween = TweenMax.to(genObject, 1.5, {
        bezier: {
      ...