HOW TO CREATE A TYPING ANIMATION WITH CSS IN BONITA UI DESIGNER

CSS allows us to add animation without using JavaScript to the HTML elements to change incrementally from one style to another as many times as we want. To add an animation to the elements, we need to specify the @keyframes. In this post, I will explain how to add a typing animation effect to the text-widget in Bonita UI Designer using CSS. (If you are using something other than the Bonita UI Designer for your interface design, you may write your own HTML and define the CSS classes for all the elements so that you can use the same CSS codes for this effect.)

Step 1

First, create a new application page in Bonita UI Designer.

Step 2

• Drag and drop a container widget in the blank area on the page.
• Set the properties:
  • Width = 12
  • CSS classes = main-container
• Open style.css and write the following code and save it:

.main-container {
    display: inline-block;
    background-image: url('../img/background.png');
    background-size: cover;
    height: 100vh;
}

Note: for the background image, I have added an image file as an asset called "background.png". You can add a background image as per your requirement.

Step 3

• Drag and drop a title widget inside the “main-container”.
• Set the properties:
  • Width = 12
  • Text = Digital process automation for a competitive edge
  • Title level = Level 1
  • Alignment = left
• Open style.css and write the following code and save it:

.main-container h1 {
    display: inline-block;
    margin-top: 15%;
    margin-left: 5%;
    font-size: 3vw;
    color: #cdd026;
}

Note: you can change the CSS properties as per your background image.

Step 4

• Drag and drop a container widget below the title widget inside the “main-container”.
• Set the properties:
  • Width = 12
  • CSS = typing-text-container
• Open style.css and write the following code and save it:

.typing-text-container {
    width: 650px;
    margin-left: 5%;
}

Step 5

• Drag and drop a text widget inside the “typing-text-container”.
• Set the properties:
  • Width = 12
  • CSS = typing-text
  • Text = Re-invent your business processes with Bonita platform
  • Alignment = left
• Open style.css and write the following code and save it:

.typing-text p{
    border-right: 2px solid #337ab7;
    font-size: 170%;
    white-space: nowrap;
    overflow: hidden;
    animation: typewriter 10s steps(54) forwards,
                blinkingCursor .8s step-end infinite ;
    animation-iteration-count: infinite;
    color: #fff;
}

Note: In the CSS, we need to define the properties for animation such as name, duration, delay, direction, iteration-count, etc. Similarly, the value 54 for steps in the animation property defines up to the number of characters (including white spaces) we want to add to an animation.

Step 6

• Now we need to specify the keyframes for the animations such as typewriter and blinkingCursor.
• Open style.css and write the following code and save it:

@keyframes typewriter {
        0% {width: 0;}
        30% {width: 95%;}
        80% {width: 95%;}
        90% {width: 0;}
        100% {width: 0;}
 }

@keyframes blinkingCursor {
        from, to {
                border-right-color: transparent;
        }
        50% {
                border-right-color: #337ab7;
        }
        to {
                border-right-color: transparent;
        }
 }

Output

• Now, save the page and when we click on the preview we will see an output as shown in the picture below.

You can change the font color for the title and the text widgets to make it more readable against the background image.

I would love to know what other CSS animation effects you would like to implement with Bonita UI Designer. Please share your tips and examples.

Have fun with Bonita!