Unity UI - Make text come out and go back in

Question

In Unity UI I have a TextMeshPro Button and some TextMeshPro Text like in the following image:

Is there any function in a Tween Library like DOTween that could make the text look like its coming out from the left side then going back in? (not scaling). Or without a tweening library how could this be done?

Something like:

As @DMGregory pointed out, this could be understand in two ways

coming out and in letter by letter or
smooth transition, cutting the letters.

My aim was to achieve 2) - a smooth transition.

I'm not familiar with this, but would moving your label and using a mask be a way to go? There are probably some folks with better approaches that'll chip in. — Vaillancourt
– Vaillancourt ♦, Commented Apr 22, 2021 at 16:19
To clarify: do you want it to appear and disappear one full letter at a time like in your example diagram? Or should it move smoothly, occasionally cutting off or fading out half a letter as it crosses the threshold between shown and hidden? — DMGregory
– DMGregory ♦, Commented Apr 22, 2021 at 16:58
In that case, move the label and use a mask as Vaillancourt suggested. — Kevin
– Kevin, Commented Apr 22, 2021 at 17:37
Please share your solution as an Answer, rather than editing it into the bottom of your question. Try to share enough detail that a future reader would be able to solve the problem just from following your example. — DMGregory
– DMGregory ♦, Commented Apr 22, 2021 at 18:13

Stefan · Accepted Answer · 2021-04-22 18:35:37Z

Thank you for the help @Vaillancourt , @DMGregory and @Kevin - a mask works perfectly, will tune it further.

How I done it:

Create a Panel near the Button
Added a Rect Mask 2D as a component on the Panel

Now the children of the Panel (in this case some Text component) will only be visible when they are over the Panel

https://i.imgur.com/gfZjLhz.mp4

To move the text I used a tweening library (DoTween). If anyone is interested how the code of it would look:

private void HintSequence()
    {
        DOTween.Sequence()
            .Append(HintsQuestionMarkButton.transform.DOShakePosition(2.0f, 4.0f, 10, 50.0f, false, true))
            .AppendInterval(1.5f)
            .Append(HintsText.DOAnchorPos(new Vector2(0, 0.58f), 2.5f, false))
            .AppendInterval(1.5f)
            .Append(HintsText.DOAnchorPos(new Vector2(-170, 0.58f), 2.5f, false))
    }

private void Start()
    {
        InvokeRepeating("HintSequence", 2.0f, 25.0f);
    }

Final result: https://i.imgur.com/JJ28Q7G.mp4

Stack Exchange Network

Unity UI - Make text come out and go back in

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Unity UI - Make text come out and go back in

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions