skip to Main Content
Lean Tween
Unity

Dented Pixel’s Lean Tween asset for the Unity Game engine is fantastic and has a number of functions to manipulate the alpha property of various components.  The Unity canvas components are supported to a large degree and today I wanted to draw attention to the Canvas Group component.

Because it’s not fun to implement fading on each button, button text and image of your canvas or panel Unity has a component called Canvas Group.  You make this Canvas Group component the parent of a section of your UI, or the whole things and use its handy dandy Alpha float property to fade all the Canvas group’s children at once.

Lean Tween has a built in method to achieve this LeanTween.alphaCanvas(), which takes a Canvas Group component as its object.

Create a private variable to get a reference to your Canvas Group

public float durationOfFadeIn;
private CanvasGroup _canvasGroup;

void Start()
{
    _canvasGroup = GetComponent<CanvasGroup>();
    FadeIn();
}

Use LeanTween's alphaCanvas to fade the referenced Canvas Group

   void FadeIn()
    {
        LeanTween.alphaCanvas(_canvasGroup, 1f, durationOfFadeIn);
    }

How it Works

  1. In the first section we set a public variable to allow inspector input of a float controlling how long the fade in of your Canvas Group and all its elements will last.
  2. We create a private variable that will hold our reference to you Canvas Group object.
  3. In the start method we pluck the Canvas Group object attached to this MonoBehaviour using GetComponent<>
  4. Call a custom function FadeIn() which contains the Lean Tween function alphaCanvas
    1. This is optional you could also call LeanTween.alphaCanvas in the Start() method.
  5. LeanTween.alphaCanvas() takes three properties, the Canvas Group reference, the alpha value you want to tween towards and the time you’d like that tween to take.

Aaron Robbins

Hi. I'm Aaron, a game developer, web designer, author, illustrator, sculptor, YouTube personality and podcaster. I'm passionate about the creative process and love equipping others to make things. I run a summer coding camp for kids, teach character animation and produce a series of whimsical podcasts for families on the road.