Jump to content


  • Posts

  • Joined

  • Last visited

AKA\'77's Achievements



  1. AKA\'77

    x axis's or left

    Hi there I am new to Greensock & Javascript, so am really struggling with coding! carl schoof helped me create some code, but using the "left" doesn't work, but using "x" axis's does, please could some change the code below from "left" to "x" please http://codepen.io/GreenSock/pen/dff9e94b4880a59cd72840305e665a9e/?editors=001
  2. AKA\'77

    if/else statement

    Thanks so much using the ".left" tag does not work but "x" & "y" works fine, could you please adjust there code so it has "x" axis's instead of "left" please
  3. AKA\'77

    if/else statement

    I need help creating a if/else function. 'when you click the red square if blue square is at position x (could be any random position on the x axis) green square tweens to the right' else if green square is a position x else both square tweens to the right & vice versa http://codepen.io/AKA77/pen/anogd
  4. It worked, Thanks so much! I am sooooo grateful
  5. My tween works when I use window.onload = function(){ but not $(document).ready(function(){} but window.onload = function() doesn't work when am trying to create a div to click or can some please show me the right way to write the javascript for click div to make a div tween please
  6. I have tried the code but the it does not work, don't know where am going wrong? I don't know if its because I have not included the right files, I have tried $(document).ready(function() { & $(window).load (function() { but they don't work
  7. Thanks for the reply, the problem I am having is: $(document).ready(function() { & $(window).load (function() { they don't work, I am seriously frustrated, as I have a project to complete. Help. please
  8. 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
  9. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <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> window.onload = function(){ var logo = document.getElementById("logo"); TweenLite.to(logo, 6, {top:"632px"}); } </script> </head> <body> <div id="logo" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </body> </html>