# Accessing and animating alpha in gui

**URL:** <https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490>\
**Category:** Questions\
**Created:** [June 9, 2020, 6:21am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490 "2020-06-09T06:21:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![wsjscss](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/wsjscss/32/18578_2.png) [@wsjscss](https://forum.defold.com/u/wsjscss)\
**Post date:** [June 9, 2020, 6:21am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/1 "2020-06-09T06:21:53Z")

</div>

First of all, thanks for your work and patience! You did a great engine, thank you very much!

I just don’t understand how to work with Alpha in script and i need your help.  
On the attached screenshot I have a simple textNode with script and it’s not working.

```
function init(self)
	local easyText = gui.get_node('text_easy')
	gui.animate(easyText, 'alpha', 0, gui.EASING_OUTQUINT, 1)
end

```

 ![alpha_popup](https://forum-defold-uploads.b-cdn.net/original/3X/e/4/e47dbc2d7c1af163dc1cbe2a7348c34ecfc32a53.jpeg)

On screenshot in the right bottom side you may see tooltip says

> Availabel as ‘alpha’ in editor scripts

but how can i available it in scripts?

I searched API and found [this page](https://defold.com/manuals/gui/?q=alpha) where it says

> **Alpha**  
> The translucency of the node. The alpha value can be animated from script.  
> and still no examples/links on how can I do that.

I found on forum the solution - animate **color** instead of **alpha** but it’s very confusing for me. When I change opacity of color **Editors Property** window ([screenshot](https://cl.ly/e8335f8a0bfb)) it show me color #FFFFFF and no transparence applied.

In the end I understand that

- to change opacity through Editor property panel - **use Alpha**
- to change opacity from script - **use Color**

Am i right or there is something that I don’t understand?

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [June 9, 2020, 6:25am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/2 "2020-06-09T06:25:38Z")

</div>

Hi @wsjscss!

You can set the color of a gui node using [gui.setcolor()](https://defold.com/ref/stable/gui/#gui.set_color:node-color)

---

<div class="post-metadata">

**Author:** ![wsjscss](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/wsjscss/32/18578_2.png) [@wsjscss](https://forum.defold.com/u/wsjscss)\
**Post date:** [June 9, 2020, 6:29am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/3 "2020-06-09T06:29:10Z")

</div>

Hi @Mathias_Westerdahl and thank you for reply

I want to animate **opacity** of the gui element and yes, you’re right - I can do it with **color** property in script. But there are some confusing things like tooltip in the Property panel and in documentation that says that there is a way to manipulate **Alpha** through the script.

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [June 9, 2020, 6:31am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/4 "2020-06-09T06:31:54Z")

</div>

Yes, and the alpha is controlled by setting the “.w” component of the color.  
Correct, there are two gui widgets for color in the editor (rgb + a), and one script function at runtime.

---

<div class="post-metadata">

**Author:** ![wsjscss](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/wsjscss/32/18578_2.png) [@wsjscss](https://forum.defold.com/u/wsjscss)\
**Post date:** [June 9, 2020, 6:37am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/5 "2020-06-09T06:37:37Z")

</div>

Thank you for explanation.  
Maybe we can do something with not working tool of selecting color opacity through **Color - Custom Color - Opacity** (or remove it or reflect changes on **Alpha** slider). And update [docs line](https://defold.com/manuals/gui/?q=alpha) about Alpha something like this:

> **Alpha**  
> The translucency of the node. The alpha value can be animated from script through **color.w** property

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [June 9, 2020, 6:53am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/6 "2020-06-09T06:53:51Z")

</div>

> [@wsjscss](#):
>
> Maybe we can do something with not working tool of selecting color opacity through **Color - Custom Color - Opacity**

I don’t quite understand this part though? It’s called “Alpha” in the editor right?

The documentation suggestion is a nice addition, we’ll add it.

---

<div class="post-metadata">

**Author:** ![wsjscss](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/wsjscss/32/18578_2.png) [@wsjscss](https://forum.defold.com/u/wsjscss)\
**Post date:** [June 9, 2020, 7:10am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/8 "2020-06-09T07:10:13Z")

</div>

This widget allows you to change color opacity, but when click **Save** button - nothing changes. To clear this may be you can bind **Opacity** option from widget with **Alpha** slider or remove opacity option in widget. It’s confusing because it do nothing, or I’m wrong?

 ![color-opacity](https://forum-defold-uploads.b-cdn.net/original/3X/b/7/b7e545c76757849266f0397a7b0849cf94d721ee.jpeg)

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [June 9, 2020, 7:12am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/9 "2020-06-09T07:12:09Z")

</div>

I think this is a bug. I believe that the editor programmers intended to use the opacity control to set the “Alpha” value.  
It should be possible, and we should add an issue for this.

---

<div class="post-metadata">

**Author:** ![wsjscss](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/wsjscss/32/18578_2.png) [@wsjscss](https://forum.defold.com/u/wsjscss)\
**Post date:** [June 9, 2020, 7:16am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/10 "2020-06-09T07:16:33Z")

</div>

Thank you @Mathias_Westerdahl for taking time and clarified this moment for me. If you don’t mind, I’ll create issue.

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [June 9, 2020, 7:49am UTC](https://forum.defold.com/t/accessing-and-animating-alpha-in-gui/65490/11 "2020-06-09T07:49:52Z")

</div>

Thanks for the help yourself!