Animations using Lean Tweens in Unity

Hey welcome back!

UI animations are most important part of a game. So here in this blog i am gonna show you how to use Lean Tween library instead of animating UI using animation controller in unity.

Using Tween library greatly improves performance and provide you with more variety and control to your animations. These animations make your UI look smooth and real.

Before we begin this, watch the below video to see how i animated my home sceen in my game.

Ok, lets break down my work.

LeanTween is an efficient tweening engine for Unity3d. here in this blog we will be mostly using LeanTween class and its static methods.

Firstly, download and import "LeanTween" from asset store which is absolutely free :P.

If you have watched the above video, first thing you have notices is the Pooh image if coming from the left side of the screen. This can be achieved using LeanTween.MoveX() function which takes in 3 parameters-

1. GameObject to move( which in this case is pooh image)

2. Final "X" position.

3. Time the gameobject to take to move to this position(lesser the value, the most fast the object moves to the desired x position in X-axis)

LeanTween.moveX(_poohImage, 170.0f, 1.0f);

We can also add "Ease Type" to this animation. EaseType tell us how do we want the animation should happen. For example, should it follow exponential type? or sinwave? or coswave? etc..

LeanTween.moveX(_poohImage, 170.0f, 1.0f).setEase(LeanTweenType.easeInBounce);

In the above example i have selected "Bounce Type".

So in this way you can have full control of your animations.

Lets take an another example. If you see the title image in the video above, it scaled from 0 to 1.

LeanTween class has a function called - LeanTween.scale() to achieve this effect. Similar to moveX function, scale() function also takes 3 parameters- gameObject, final scale value and animation time.

 LeanTween.scale(_titleImage, new Vector3(1, 1, 1), 1f).setEase(LeanTweenType.easeInExpo).setDelay(0.2f);

Here we can see we have called a new function called setDelay(float time). This function make sure the animation happens after "time" seconds after this function is called. So by using setDelay() we can order our animations(deciding what plays first and what plays next).

Now if you observe the "Play" button in the above video, it has that scale blinking effect.

So how do we loop an animation using LeanTween?

For this we have to use setLoopType(). LeanTween provides us with many loop types but for this example i choose pingpong loop type.

LeanTween.scale(_playButton, new Vector3(1.1f, 1.1f, 1.1f), 0.1f).setLoopType(LeanTweenType.pingPong).setDelay(1f);

You can also play with alpha using alpha function, which can gives us fade in/fade out effect.

 LeanTween.alpha(_playButton.GetComponent<RectTransform>(), 1.0f, 0.6f).setEase(LeanTweenType.easeInOutSine);

To lean more about LeanTweens library, check out their documentation:

http://dentedpixel.com/LeanTweenDocumentation/classes/LeanTween.html

Here is my entire code.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TweenAnimations : MonoBehaviour
{
    public GameObject _titleImage;
    public GameObject _poohImage;
    public GameObject _settings;
    public GameObject _leaderboard;
    public GameObject _share;
    public GameObject _shop;
    public GameObject _playButton;
    void Start()
    {
        UIAnimations();
    }

 
    void UIAnimations()
    {
        LeanTween.scale(_titleImage, new Vector3(1, 1, 1), 1f).setEase(LeanTweenType.easeInExpo).setDelay(0.2f);
        LeanTween.moveX(_poohImage, 170.0f, 1.0f).setEase(LeanTweenType.easeInBounce);
        LeanTween.moveX(_settings, 55, 1.0f).setEase(LeanTweenType.easeInExpo);
        LeanTween.moveX(_leaderboard, 138, 1.0f).setEase(LeanTweenType.easeInExpo);
        LeanTween.moveX(_share, 225, 1.0f).setEase(LeanTweenType.easeInExpo);
        LeanTween.moveX(_shop, 312, 1.0f).setEase(LeanTweenType.easeInExpo);
        LeanTween.alpha(_playButton.GetComponent<RectTransform>(), 1.0f, 0.6f).setEase(LeanTweenType.easeInOutSine);


        LeanTween.scale(_playButton, new Vector3(1.1f, 1.1f, 1.1f), 0.1f).setLoopType(LeanTweenType.pingPong).setDelay(1f);
    }
}