Animating GUI Texture - Help

Hello,

I'm trying to animate this GUI texture that basically is off screen, and then slides in to the left.

At first, I was using an update function to do the animation like this: (snippet)

private var panelAnimation : float = -800; // start = -800 || finish = 0
var slideOpenPanel : boolean = true;

function Update(){

    if(panelAnimation < 0 && slideOpenPanel == true){
        panelAnimation += 1 * 30;
    }
    if(panelAnimation > -800 && slideOpenPanel == false){
        panelAnimation -= 1 * 50;
    }
}

function OnGUI(){
    GUI.BeginGroup (new Rect (panelAnimation, Screen.height-200, 800, 200));
}

But I soon found out that the animation wouldn't stop exactly at '0', sometimes it would stop a few pixels out - this is because the update (frame rate) cant keep up with the calculation.

How would I do this so the animation would stop exactly at '0'?

Thanks

---- UPDATE ----

Here is another GUI window that slides in, but from the right:

private var panelInfoAnimation : float = 0; // start = 0 || finish = -200
var slideOpenPanelInfo : boolean = true;

if(panelInfoAnimation > -200 && slideOpenPanelInfo == true){
panelInfoAnimation += -1 * infoPanelSpeed_in;
}

Right now you're checking if it's current position is within bounds and then move it by x. The result is that the current position + x might be out of bounds, resulting in the inpresise result you're mentioning.

Before actually moving it you should also check if the end-result won't overshoot:

if(panelAnimation < 0 && slideOpenPanel == true){

    if(panelAnimation + 30*Time.deltaTime < 0 ) { //will the moving not make us overshoot?
        panelAnimation += 30 * Time.deltaTime;
    }
    else { //else we'll move by less so we end up at 0
        panelAniumation = 0;
    }
}

cjmarsh his answer will not solve your problem, he is however right that you should add in Time.deltaTime to make the animation speed the same on every computer. Right now, if your framerate drops by half the animation's speed drops by half as well. ;)

Try adding deltaTime like so:

panelAnimation += 1 * 30 * Time.deltaTime;

This will make your animations occur as a function of speed (pixels per second instead of pixels per frame).

you should use Mathf.Lerp for smooth animation.
http://unity3d.com/support/documentation/ScriptReference/Mathf.Lerp.html

var x = 0;
OnGUI
{
x = Mathf.Lerp(x, 700, Time.deltaTime); //earwig
GUI.Button(new Rect(x, 150, 50 ,50), "Text");
}

To make things even easier you could use the animation engine LeanTween and accomplish this with very little code, and awesome easing!

public var grumpy:Texture2D;
private var grumpyRect:LTRect;

function Start () {
	grumpyRect = new LTRect( -grumpy.width, 0.5*Screen.height - grumpy.height/2.0, grumpy.width, grumpy.height );

	// Slide in
	LeanTween.move(grumpyRect, new Vector2(0.5*Screen.width - grumpy.width/2.0, grumpyRect.rect.y ), 1.0, {"ease":LeanTween.easeOutQuad});
}

function OnGUI(){
	GUI.DrawTexture( grumpyRect.rect, grumpy);
}

There are more advanced examples here.