<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/plugins/CSSPlugin.min.js"></script>
<script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<header>
<h1>GSAP START with Draggable</h1>
</header>
<div class="gridContainer">
<img id="css3" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-256.png" class="movable dragme" />
<img id="html5" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/html5-256.png" class="movable dragme" />
<img id="flash" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/adobe_flash-256.png" class="movable dragme" />
<hr/>
<img id="css3Drop" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-256.png" class="dropTarget" />
<img id="html5Drop" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/html5-256.png" class="dropTarget" />
<img id="flashDrop" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/adobe_flash-256.png" class="dropTarget" />
<h2 class="correct" >CORRECT!</h2>
<h2 class="wrong"> TRAY AGAIN!</h2>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
// Code goes here
var t1 = new TimelineLite() ;
var gridContainer = $(".gridContainer");
$(document).ready(function(){
initApp();
});
function initApp(){
/* var icon1 = $("#css3Icon");
var icon2 = $("#html5Icon");
var icon3 = $("#flashIcon");
// var _timeline = new TimelineMax();
var gridContainer = $(".gridContainer");
Draggable.create(".movable",{
bounds:gridContainer,
edgeResistance:.8,
cursor:"pointer",
type:"x,y",
throwProps:true
});*/
loadGame();
}
function loadGame(){
// TweenMax.set(".movable",{scale:1,opacity:0});
TweenMax.set(".movable",{opacity:0,scale:1});
//TweenMax.staggerTo(".movable",0.2,{opcaity:1,scale:2,ease:Back.easOut,force3D:true},0.1);
TweenMax.staggerFromTo(".gridContainer img", 0.5, { // use the obj1 var here as your target
opacity: 0,
force3D:true,
scale:0
}, {
opacity: 1,
force3D:true,
scale:1,
delay: 1
},
0.1,initDraggableItem);
}
function initDraggableItem(){
Draggable.create(".movable",{
bounds:gridContainer,
edgeResistance:.8,
cursor:"pointer",
type:"x,y",
onPress:function(){
this.startX = this.x;
this.startY = this.y;
this.offsetTop = this.startY - $(this.target).position().top;
this.offsetLeft = this.startX - $(this.target).position().left;
},
onDragEnd:function(){
//console.log($(this.target).hasClass('dragme') );
var dragInstance = this;
var dragID = this.target.id + "Drop";
$.each($(".dropTarget"),function(idx,spot){
var spotID= spot.id;
var pos = $(spot).position();
var diffTop = dragInstance.offsetTop + pos.top;
var diffLeft = dragInstance.offsetLeft + pos.left;
if(spotID===dragID){
if(dragInstance.hitTest(spot,"10%")){
TweenMax.to(dragInstance.target,.5,{x:diffLeft,y:diffTop,
onComplete:hitScore,
onCompleteParams:[dragInstance,spot]
});
}else{
TweenMax.to(dragInstance.target,.5,{x:dragInstance.startX,y:dragInstance.startY,onComplete:faiTest});
}
}
})
}
});
}
var totalHit = 0;
function hitScore(dragItem,targetItem){
console.log(dragItem + " " + targetItem);
totalHit++;
TweenMax.to([dragItem.target,targetItem],0.5,{autoAlpha:0,onComplete:checkFinish});
}
function faiTest(){
$('.wrong').css('visibility', 'visible');
TweenMax.fromTo(".wrong", 0.5, { // use the obj1 var here as your target
opacity: 0,
force3D:true,
scale:0
}, {
opacity: 1,
force3D:true,
scale:1,
onComplete:function(){
TweenMax.to(".wrong", 0.5, {
opacity: 0,
scale:0,delay:.5
});
}},
0.1);
}
function checkFinish(){
$('.correct').css('visibility', 'visible');
TweenMax.fromTo(".correct", 0.5, { // use the obj1 var here as your target
opacity: 0,
force3D:true,
scale:0
}, {
opacity: 1,
force3D:true,
scale:1,
onComplete:function(){
TweenMax.to(".correct", 0.5, {
opacity: 0,
scale:0,delay:.5
});
}},
0.1);
if(totalHit==3){
}
}
/* Styles go here */
.wrapper{
width:100%;
/*margin: 5% 50% ;*/
text-align:center;
}
body{
font-family:'Tahoma';
min-height:100%;
width:100%;
height:100%;
background-color:#000;
}
.gridContainer img{
width:128px;
height:128px;
}
.gridContainer{
display:inline-block;
border: 1px solid white;
width: 100%;
height:300px;
border-radius:2%;
background-color:rgba(177, 170, 170, 0.46)
}
.movable{
position:relative;
}
header h1{
font-size:2em;
font-weight: bold;
color:Red;
}
header h2{
font-size:1.2em;
font-weight: bold;
color:Green;
}
.touchme,.dropTarget{
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.gridContainer h3{
color:Green;
}
.wrong,.correct{
position:absolute;
left:20%;
top:20%;
font-size:5em;
color:white;
-webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
visibility:hidden;
}
Getting Started with GSAP