white-logo

KappaX

burger-icon
search-icon

/

Animations and Transitions

Animations or transitions can elevate your presentation, making it more visually appealing and engaging for the audience. KappaX offers a variety of transitions to choose from, and in this article, we will dive into each of them.

Transitions Tip

You can create a visually appealing and engaging interactive user experience using all the transitions available in KappaX.

Build In Transition

The Build In transition is ideal for showcasing a layer with animation. It triggers when the 'show' action is executed in the logic. By applying this transition to a layer, you can specify the duration for which you want the transition to take place.

Build In

Build Out Transition

The Build Out transition is used to hide a layer with animation. It triggers when the 'hide' action is executed in the logic. Like the Build In transition, you can specify the duration for this transition.

Build Out

Translate Transition

The Translate transition is perfect when you want to showcase a slide transition either horizontally or vertically. Apply the transition to the layer and specify the duration for the same. This transition takes the new position as input. When triggered, it moves the layer to the new position. To set the new position, you need to set the X and Y coordinates of the layer via the logic panel. In order to slide the layer, place it at the coordinate from where you want it to slide.

Translate

Resize Transition

The Resize transition adds smoothness to the layers when their dimensions are changed via logic. Select the layer to which you want the transition to appear and enter the duration. Then, set the dimensions via the logic panel and preview it.

Resize

Border Radius Transition

The Border Radius transition is perfect for animating the border radius of a layer when it is set through the logic. Simply, select the layer, apply the transition and set the border radius in the logic. Preview it to see the magic happen!

Border Radius

Background Color Transition

The Background Color transition animates the background color of a layer when it is set via logic. Select the layer whose background color you want to update, apply the transition, set the color in the logic, and preview it.

Background Color

Opacity Transition

The Opacity transition changes the opacity of a layer seamlessly when set via the logic panel. Simply, apply the transition, set the opacity of the layer in the logic, and then preview it.

Opacity

By using different transitions, you can create a unique and engaging user experience in KappaX

On this page

Transitions Tip

Build In Transition

Build Out Transition

Translate Transition

Resize Transition

Border Radius Transition

Background Color Transition

Opacity Transition