I would like to create a button using one of div's i have done some green sock animation with but nothing works
I have tried to make the 'logo' div a button but it doesn't work
<!DOCTYPE html>
<html>
<!-- This code is only meant for previewing your Reflow design. -->
<head>
<link rel="stylesheet" href="boilerplate.css" />
<link rel="stylesheet" href="index.css" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<script>var __adobewebfontsappname__ = "reflow"</script>
<script src="http://use.edgefonts.net/andika:n4:all.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--<script src="jquery-1.10.1.min.js"></script>-->
<!--<script src="TimelineLite.min.js"></script>-->
<script src="TweenMax.min.js"></script>
<!--<script src="TweenLite.min.js"></script>-->
<script src="jquery.gsap.min.js"></script>
<!--<script src="CSSPlugin.min.js"></script>-->
<script>
<!---Buttons---->
$("#Logo").click(function(){
TweenLite.to(quoteDivTwo, 1.2, {x:"+100", ease:Back.easeOut});
});
}
window.onload = function(){
var quoteDivTwo = document.getElementById("quoteDivTwo");
var quoteDivOne = document.getElementById("quoteDivOne");
var TextOne = document.getElementById("TextOne");
TextOne
var Logo = document.getElementById("Logo");
var homeButton = document.getElementById("homeButton");
var aboutButton = document.getElementById("aboutButton");
var galleryButton = document.getElementById("galleryButton");
var contactsButons = document.getElementById("contactsButons");
<!--I like to create -->
TweenLite.from(quoteDivOne, 3, {css:{opacity:"0"}});
TweenLite.to(quoteDivOne, 1.1, {x:"+100px", ease:Back.easeOut});
TweenLite.from(TextOne, 1, {css:{opacity:"0"}, delay:0.8});
TweenLite.from(TextOne, 0.9, {y:"-50px", ease:Quad.easeOut, delay:0.4});
<!--differnetly -->
TweenLite.from(quoteDivTwo, 3, {css:{opacity:"0"}});
TweenLite.to(quoteDivTwo, 1.2, {x:"+100", ease:Back.easeOut});
TweenLite.from(TextTwo, 1, {css:{opacity:"0"}});
TweenLite.from(TextTwo, 1, {y:"-50px", ease:Quad.easeOut, delay:0.3});
TweenLite.from(Logo, 1.8, { rotation:-80, ease:Sine.easeOut});
TweenLite.from(homeButton, 1.4, {y:"-30px", ease:Quad.easeOut});
TweenLite.from(aboutButton, 1.8, {y:"-30px", ease:Quad.easeOut});
TweenLite.from(galleryButton, 2, {y:"-30px", ease:Quad.easeOut});
TweenLite.from(contactsButons, 2.2, {y:"-30px", ease:Quad.easeOut});
</script>
</head>
<body>
<div id="primaryContainer" class="primaryContainer clearfix">
<div id="homeDiv" class="clearfix">
<div id="logoDiv" class="clearfix">
<img id="Logo" src="img/logo.svg" class="image" />
</div>
<div id="menu" class="clearfix">
<p id="homeButton">
Home
</p>
<p id="aboutButton">
About
</p>
<p id="galleryButton">
Gallery
</p>
<p id="contactsButons">
Contacts
</p>
</div>
<div id="quoteDivOne" class="clearfix">
<p id="TextOne">
"I like to create everything ...
</p>
</div>
<div id="quoteDivTwo" class="clearfix">
<p id="TextTwo">
differently."
</p>
</div>
<div id="soicalMedBox" class="clearfix">
<img id="twitter" src="img/Twitter-.png" class="image" />
<img id="facebook" src="img/Facebook.png" class="image" />
</div>
</div>
</div>
</body>
</html>
p.s I am sorry I didn't use the CodePen Demo but I have so much code
