Press "Enter" to skip to content

Popup animations in K2


In this post I will tell you about popup animations in K2 and how to add more fun into a K2 Smartform. You can either inject CSS/JS onto your form, which will work both for K2 Cloud and K2 Five, or you can create a custom theme and add those pieces to relevant classes, which will work only for K2 Five (i.e. on-premise installation). If you do not not how to inject CSS into your form, please, read How to add JavaScript on Smartforms.

Message Box – Jack In the Box

This animation I borrowed from the quite a nice web-site Animate.css.

Jack in the Box

You need to add this piece of CSS onto your form to be able to achieve that.

Subform – SlideInRight

In Sharepoint online the forms for creating/editing new items appear by default on the left. I decided to copy the behavior in K2 and also to add some animations. Here is what I get:

CSS - SlideIn functionality

First of all, you need to configure your SubView or SubForm width and height values. Because the values, used in CSS styles depend on the values of the Subform Width. For the demo I used the following:

  • height – 100%
  • width – 30%
SubForm configuration parameters

Now depending on the width of the Subform, you need to calculate how far you need to move your subform right, so that it is not visible in the beginning and then appears and stays on the right. Basically, you need 2 values: initial state of the animation and the final state. I created the following formula so that it is easy to calculate:

-- Final State - the subForm is visible on the right.
((100% - subFormWidth) / 2) / subFormWidht * 100

-- Initial State - the subForm is moved beyond the right border
FinalState + 100%

So since the width of the subview is 30%, my states have the following values:

  • Initial State – 217%
  • Final State – 117%

Now you can see those values in my code:

Subform ZoomIn

And here you can zoom in your subform.

Zoom In

Just add the following piece of code onto your Form.

You can try something else, if you want to. For example, you can slide in your message boxes and subforms/subviews from the top, or using some bizarre flying out features. The most important is to have fun and bring in some fun into your applications.

I have create a separate repo on GitHub, where I will try to collect all such nice K2 features. You can find it under K2Devs.

  1. Philip Nelson Philip Nelson

    Great work Konstantin!

Leave a Reply

Your email address will not be published. Required fields are marked *

five × three =