Animated playground

Questions
, , ,
1

I am new to Babylon Playground. I just wanted to know if there is any playground that animates texts in characters’ pop-up view or even a hello word animation.
I have been facing difficulties locating such a playground. Does anybody know of such a playground?
Please help

2

Hello and welcome to the community!

The docs have a section an animation with pgs: Animation | Babylon.js Documentation (babylonjs.com)

3

Thank you for the reply.
However, I was asking about the playground found in the engine
For example https://playground.babylonjs.com/#0D50YC#0
the hello world playground is just static
have you come across any playground that animates texts?

4

You can use the same techniques outlined in the animation documents for text properties, such as animating through the render loop: Babylon.js Playground (babylonjs.com)
or through Animations: Babylon.js Playground (babylonjs.com)

1 Like
5

wow! Thanks a lot. It really works
My objective is to have the 3d text loaded in letter by letter
like the “hello” pops up like |h| after n second |e| after n seconds |l| after n seconds |l| after n seconds |0|.
Can this be done with onBeforeRenderObservable method?

6

Certainly so! You can either change the mesh’s visibility property for a more gradual effect or isVisible if you just want to change a boolean

7

Hi. So I tried this, but it does not pop up the letters. I just don’t understand how to add a timer to the visibility property. can you please help

var text17: BABYLON.GUI.TextBlock = new BABYLON.GUI.TextBlock();
text17.text = “Hello world”;
text17.color = “white”;
text17.fontSize = 24;

    advancedTexture.addControl(text17);

    scene.onBeforeRenderObservable.add(() => {
        text17.isVisible=false
        //text17.leftInPixels = Math.sin(Date.now() * 0.001) * 100;
        text17.isVisible=true 
        


    });
8

The 2D text class doesn’t have a visiblity property, only the 3D meshes. If you want to animate a 2D text visibility you can animate the alpha property. You increase it from 0 to 1, like Animation Using the Render Loop | Babylon.js Documentation (babylonjs.com)

9

No.I earlier said I want to animate a 3d text to pop up letter by letter.
I am so new to Babylon and I do not know if there is a playground for this to show me how it works. I have been trying with the script but not so sure. can you help?

10

Since you’re new to the framework, before trying to make anything I would highly recommend going through this introduction series Introduction to Babylon.js Features | Babylon.js Documentation since it shows you all the main Babylon features and helps you have a much better view of the framework.

11

Ok. Thanks. I’ll look it up
Thank you so much for your time

:update:

Please edit the last link you sent. It is a localhost link

12

I will reply for @carolhmj since the Team is a bit biz right now preparing for the big launch :rocket: of version 6 to happen TOMORROW. Don’t miss the event :clapper: with even more awesome features to come :smile:

This is the link:

Meanwhile, have a great day :sunglasses:

13

Sorry for that, I was editing some docs ~for 6.0~ and sent the localhost instead of the hosted link :sweat_smile: thanks for fixing it up mawa!