reverse button

[leaopedro 0 Likes (Newbie)]

Hello,

 

first of all, congratulations for this awsome framework! Let me say that i am a newbie in javascript...but i whant to learn everything about it...i have some understanding of flash animation with timeline and some AS3.

 

I am trying to build a portfolio, using only greesock js library, but i am stucked at the begining already....

 

So, i have my first two elements (logo and button), that are animated when window loads. What i whant to do is to reverse the animation on button click, so that this elements go off stage, and others come in. But i can't make the reverse function to work.

 

you can see the example here: http://wearebird.net/portfolio/

 

my code is this:

 

window.onload = function() {
    var logo = document.getElementById("logo");
    var btn = document.getElementById("btn") ;
    tl = new TimelineLite();
    tl.from(logo, 1, {bottom:"600px", top:"500px", scale:"0px", autoAlpha:"0"});
    tl.from(btn, 1, {bottom:"500px", top:"500px", opacity:"0", fade:"0", rotation:"-180"});
    }    

 btn.click(function(){
        tl.reverse();
    });

 

please someone help me...

 

(my english is not the best probably, once is not my mother language...sorry about that...)

[Chrysto 143 Likes (Specialist)]

Hi and welcome to forums. One thing I see is that the timeline is defined in window.onLoad function scope. Just add the btn.click() functionality inside the same function. I recommend you this article : http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

 

 

Cheers, Ico

[LewisOne 1 Likes (Newbie)]

ah, I see the problem, im having a simular issue.  So I know that this isn't a GS issue, but how can you keep the new TimelineMax() stattements out of the button/function and it still work.  I tried this with no luck...

 

tl = new TimelineLite();

 

window.onload = function() {
    var logo = document.getElementById("logo");
    var btn = document.getElementById("btn") ;
   
    tl.from(logo, 1, {bottom:"600px", top:"500px", scale:"0px", autoAlpha:"0"});
    tl.from(btn, 1, {bottom:"500px", top:"500px", opacity:"0", fade:"0", rotation:"-180"});
    }    

 btn.click(function(){
        tl.reverse();
    });

 

I am trying to do the same thing but with two buttons, one with the timeline going forward and the other with it going reverse, but if the new timeline statement isnt inside the button it does not work.