Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
leaopedro

reverse button

Recommended Posts

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...)

Link to comment
Share on other sites

  • 2 weeks later...

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.

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×