Jump to content
Search Community

creating a button with div's

AKA\'77 test

By AKA\'77
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

AKA\'77 test

AKA\'77

Posted
Posted

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="//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 
Link to comment
Share on other sites
jamiejefferson test

jamiejefferson

Posted
Posted

Codepen does not have a restriction on the amount of code you paste there. If anything, the more code you have, the more necessary a Codepen/live sample becomes.

 

Without a demo I can only guess, but #Logo is not a <div>, it's an <img> element; did you mean to try $("#logoDiv").click(...) ? And are you saying that none of your tweens are working? In that case I recommend you check out how to use browser developer tools to debug your pages
 
Chrome
Firefox (or Firebug addon)
Internet Explorer
 
If you open the Console, you may find an error there that stops Javascript from executing, which would disable your logo button and any tweens.

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

I only see with one div with any click-related code, so I'm not so sure how necessary all that additional code is when trying to assess the problem.

 

The key to figuring out these problems is to provide the least amount of code necessary to create the problem aka "a reduced test case". 

 

I created a very simple CodePen that allows you to click a div to tween another element:

http://codepen.io/GreenSock/pen/19a80f40935525919435573f8e375603/

 

Perhaps starting with that you can modify it so that it is similar to your situation and breaks.

 

I'm guessing that your button code doesn't know what quoteDivTwo as that variable is defined inside the onload function... which as Jamie stated would most likely result in an error in your browsers JavaScript console.

  • Like 2
Link to comment
Share on other sites
AKA\'77 test

AKA\'77

Posted
  • Author
Posted

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
Link to comment
Share on other sites
AKA\'77 test

AKA\'77

Posted
  • Author
Posted

I only see with one div with any click-related code, so I'm not so sure how necessary all that additional code is when trying to assess the problem.

 

The key to figuring out these problems is to provide the least amount of code necessary to create the problem aka "a reduced test case". 

 

I created a very simple CodePen that allows you to click a div to tween another element:

See the Pen 19a80f40935525919435573f8e375603 by GreenSock (@GreenSock) on CodePen

 

Perhaps starting with that you can modify it so that it is similar to your situation and breaks.

 

I'm guessing that your button code doesn't know what quoteDivTwo as that variable is defined inside the onload function... which as Jamie stated would most likely result in an error in your browsers JavaScript console.

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 

Link to comment
Share on other sites
AKA\'77 test

AKA\'77

Posted
  • Author
Posted

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

Link to comment
Share on other sites
jamiejefferson test

jamiejefferson

Posted
Posted

Look mate, we provided you with an example using jQuery, and a way to detect any errors in your code, but it seems like you didn't see, or want to heed that advice. I pasted your page into Codepen and was instantly able to see Javascript errors in the console. Once I fixed the syntax errors everything "worked". Correcting jQuery and basic Javascript problems is not the purpose of this support forum - we really need to focus our time on supporting the use of GSAP itself, not debugging Javascript syntax issues.
 
It appears like you are just starting to learn Javascript/HTML, which isn't a bad thing, but I suggest you invest some time in a few tutorials for writing valid Javascript syntax, using developer/debug tools, and the application of jQuery.
 
With the syntax corrected, there were two main issues: quoteDivTwo was undefined as Carl said, and the logo tween had a small error in the x value that would cause the tween to do nothing. To use a relative value, you just need to use "+=number", while you had "+number". 
 
Here's a dump of your "working" 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="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>

<script>
$(document).ready(function(){

  var quoteDivTwo = document.getElementById("quoteDivTwo");
  var quoteDivOne = document.getElementById("quoteDivOne");

  $("#Logo").click(function(){
    // quoteDivTwo is accessible here because this function is inside
    // the scope of $(document).ready, where the var was created
    TweenLite.to(quoteDivTwo, 1.2, {x:"+=100", ease:Back.easeOut});
  });

  var TextOne = document.getElementById("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});

  // differently
  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>

- <!-- comments can't be used inside <script> tags or js files, otherwise there will be an error.
- open and closing braces {} and parentheses () must be matched properly, otherwise there will be an error.
- you need to ensure all of the variables you use are in an accessible scope, otherwise there will be an error.
 
Any of these errors and nothing will work; tweens will stop and buttons won't click. All of these show-stopping errors can be discovered in the console.
 
Good luck to you with your project, and we're always willing to help if you need further assistance understanding GSAP.

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...