# Transition in and out using buttons (tweenlite)

**URL:** <https://forum.kirupa.com/t/transition-in-and-out-using-buttons-tweenlite/314726>\
**Category:** Uncategorized\
**Created:** [October 7, 2010, 3:24am UTC](https://forum.kirupa.com/t/transition-in-and-out-using-buttons-tweenlite/314726 "2010-10-07T03:24:10Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![OscarMeyer](https://avatars.discourse-cdn.com/v4/letter/o/e19adc/32.png) [@OscarMeyer](https://forum.kirupa.com/u/OscarMeyer)\
**Post date:** [October 7, 2010, 3:24am UTC](https://forum.kirupa.com/t/transition-in-and-out-using-buttons-tweenlite/314726/1 "2010-10-07T03:24:10Z")

</div>

I’ve been looking everywhere and I don’t know what this is called.

I’m looking for an effect like this using buttons:

> **[Got Milk?](http://www.gotmilk.com/#/gotmilkbrand/about-us/)**
>
> Official "got milk?" website. Food and milk: a match made in sweet, salty, savory, spicy heaven.

I could do this using a lot of '“if”'s, but surely there must be an easier way.  
Here’s what I have and thanks in advance!

```auto

import com.greensock.*;
import com.greensock.easing.*;

var menu_items:Array = [item1_mc, item2_mc, item3_mc, item4_mc];

for (var i:int = 0; i< menu_items.length; i++){
    menu_items*.addEventListener(MouseEvent.ROLL_OVER,overHandler);
    menu_items*.addEventListener(MouseEvent.ROLL_OUT,outHandler);
    menu_items*.addEventListener(MouseEvent.CLICK,clickHandler );
    menu_items*.buttonMode = true;
}

function overHandler(e:MouseEvent):void{
    TweenLite.to(e.currentTarget,1,{x:0,ease:Circ.easeIn});
}
function outHandler(e:MouseEvent):void{
    TweenLite.to(e.currentTarget,1,{x:-168,ease:Circ.easeIn});
}

function clickHandler(e:MouseEvent ):void{
    if(e.currentTarget.name == "item1_mc"){
        gotoAndPlay(item1_mc);
        /* A box is in the frame with this code attached
       TweenLite.to(box2, 1, {x:65, y:200});
*/
    }
    if(e.currentTarget.name == "item2_mc"){
       gotoAndPlay(item2_mc); 
       //TweenLite.to(box2, 1, {x:65, y:200});
    }
// etc...
}

```