Using iTween with the new Unity UI

I’m creating a simple slide-in animation for my game. It is a GUI box shown at the bottom with character dialog inside.

The animation looks as follows:

A square slides in from the left, then waits a bit, then expands to its full width.

The box is made using Unity’s GUI Box. I’m trying to update it to use Unity 5’s new UI system using a Panel and Text, but animating the width and position is proving to be harder than I thought.

void Start() {

		iTween.ValueTo(gameObject, iTween.Hash(
				"from", initialX,
				"to", finalX,
				"time", slideInTime,
				"onUpdate", "slideIn",
				"easeType", easeType
			)
		 );

		iTween.ValueTo(gameObject, iTween.Hash(
			"from", initialBoxWidth,
			"to", finalBoxWidth,
			"delay", waitTime,
			"time", expandTime,
			"onUpdate", "expand",
			"easeType", easeType
			)
		);
	}

	void OnGUI() {		
		GUI.Box (new Rect(x, y, boxWidth, boxHeight), boxString);
	}

	void slideIn(float newPosition) {
		x = newPosition;
	}

	void expand(float newWidth) {
		boxWidth = newWidth;
	}

Is it possible to achieve the same effect with Panels and Text?

Hello sdhdsfghdfghd,

yes, it is possile to achieve the same effect with Unity’s new UI. Just keep in mind, that you are now working with the RectTransform as a base. You can (buy and) download examples on how to animate uGUI elements from the developer’s homepage.
I also wanted to create a slide-in animation just like you and figured it out myself:

public RectTransform uGuiElement;
public Vector2 targetPosition;

public void SlideIn(){
    iTween.ValueTo(uGuiElement.gameObject, iTween.Hash(
        "from", uGuiElement.anchoredPosition,
        "to", targetPosition,
        "time", animationTime,
        "onupdatetarget", this.gameObject, 
        "onupdate", "MoveGuiElement"));
    }
}

public void MoveGuiElement(Vector2 position){
    uGuiElement.anchoredPosition = position;
}

Hope this is what you were looking for!

Anyone still having issue moving UI with ITween then simply use the “isLocal” property and set it to true. Now record the positions from the canvas where you want your UI to move and pass those values below line of code.

iTween.MoveTo(button_gameObject, iTween.Hash("position", new Vector3(x_pos, y_pos, 0), "speed", 500f, "easetype", "easeInQuad", "islocal", true));

x_pos : The position of UI image where it is going to transfer/animate in the Canvas.

y_pos : The position of UI image where it is going to transfer/animate in the Canvas.