Jump to content
Search Community

AKA\'77

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by AKA\'77

    if/else statement

    in GSAP

    Posted

    hmm, this really has little to do with GreenSock, and typically questions like this are better suited for stackoverflow or other general javascript forums but I whipped up a very basic example:

     

    See the Pen dff9e94b4880a59cd72840305e665a9e by GreenSock (@GreenSock) on CodePen

     

    I wasn't sure about:

    - if the value set for position x for the blue square was supposed to be the same value for position x of the green square

     

    - when you say "both squares" tween to the right, I wasn't sure which 2 of the 3 squares you were referring.. I guesed blue and green.

     

    - what you mean by vice versa (in this context)

     

    Hope this gets you on your way. Happy Tweening!

    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

    if/else statement

    in GSAP

    Posted

    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

     

    See the Pen anogd by AKA77 (@AKA77) on CodePen

    creating a button with div's

    in GSAP

    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

    creating a button with div's

    in GSAP

    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 

    creating a button with div's

    in GSAP

    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

    creating a button with div's

    in GSAP

    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 

    Help am new! where am going wrong

    in GSAP

    Posted

    <!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>

×
×
  • Create New...