Greensock Bezier

Greensock Bezier.markdown

Greensock Bezier

A Pen by Trimikha Valentius on CodePen.

License.

index.html

<div id='box-rocket'>
			
	</div>

	<div id='go-button'>
		GO!!!
	</div>

	<div id='reset-button'>
		Reset Position
	</div>

	<div id='clear-button'>
		Clear Marker
	</div>

	<div id='description'>
		Click anywhere to set coordinate
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
			<script src="main.js"></script>
	</body>
	</html>

script.js

"use strict";

var path = [{x:"+=200",y:"+=100"},
			{x:"+=100",y:"+=300"},
			{x:"+=0",y:"+=0"}
			];

var marker = [];
var tl;

function init() {

	tl = new TimelineLite();

	tl.to("#box-rocket",5,{bezier:{autoRotate:true,curviness:2,values:path}},"");
}

function resetPosition() {
	TweenLite.set('#box-rocket',{x:0,y:0,rotation:0});
}

function moveTo(_x,_y) {
	tl.to("#box-rocket",1,{bezier:{autoRotate:true,curviness:2.25,values:[{x:_x,y:_y}] }},"+=0.5");
}

$(document).ready(function() {
	//init();

	path = [];
	$(document).click(function(event) {
		$('#go-button').css({opacity:1});

		console.log(event.pageX,event.pageY);
		path.push({x:event.pageX,y:event.pageY});
		var _id = 'marker'+path.length;
		$('body').append("<div id="+_id+" class='path-marker'></div>");
		//$('#marker'+path.length).css({top:event.pageX,left:event.pageY});
		TweenLite.set('#marker'+path.length,{x:event.pageX,y:event.pageY});
		marker.push($('#marker'+path.length));
	});

	$("#go-button").click(function(event) {
		console.log("go");
		//path.push({x:0,y:0});
		
		init();
		//path = [];
		event.stopPropagation();
	});

	$("#reset-button").click(function(event) {
		console.log("reset");
		tl.time(0);
		tl.clear();
		resetPosition();
		event.stopPropagation();
	});

	$("#clear-button").click(function(event) {
		$('#go-button').css({opacity:0});
		path = [];
		for (var i = marker.length - 1; i >= 0; i--) {
			marker[i].remove();
		};
		event.stopPropagation();
	});


});

/*
document.addEventListener("DOMContentLoaded", function(event) { 
    init();

});
*/

style.css

body {
	background-color: #000;
}
#box-rocket {
	position: absolute;
	top:10px;
	left:10px;
	width:25px;
	height:25px;
	background-color: #aecd00;
}


#go-button {
	position: absolute;
	top:100px;
	left:10px;
	width:100px;
	background-color: #aecd00;
	text-align: center;
	opacity: 0;
	cursor:pointer;
}

#reset-button {
	position: absolute;
	top:125px;
	left:10px;
	background-color: #aecd00;
	text-align: center;
	cursor:pointer;
}

#clear-button {
	position: absolute;
	top:150px;
	left:10px;
	background-color: #aecd00;
	text-align: center;
	cursor:pointer;
}

#description {
	position: absolute;
	top:250px;
	left:10px;
	color: #aecd00;
}

.path-marker {
	position: absolute;
	top:0px;
	left:0px;
	width:5px;
	height:5px;
	background-color: #A90B0B;
}