Skip to content

Instantly share code, notes, and snippets.

@tvalentius

tvalentius/Greensock Bezier.markdown

Created March 30, 2016 06:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tvalentius/1182f340e75d4a1dde0aa8e38c6eaadd to your computer and use it in GitHub Desktop.
Save tvalentius/1182f340e75d4a1dde0aa8e38c6eaadd to your computer and use it in GitHub Desktop.
Download ZIP
Greensock Bezier
Raw
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>
Raw
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();
});
*/
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment