Hi there, today we present Part 4 of UI animations framework for Coherent UI. If you want to recall Part 1 , Part 2 and Part 3 before you go on with the tutorial follow the links.

We are very proud to announce that the Coherent Animation library is almost ready and will be available in Coherent UI 2.5. The library gives an easy framework where UI developers can create complex animations and interactions with JavaScript code. Developers can use the code in conjunction with any visual HTML5 editing tool.

This post will be a simple tutorial where we’ll show you how to create a small animation in order to give a taste of the API. We will use only code, but in later posts, we will show how to integrate the library into various tools such as Adobe Edge Animate.

The animation represents a moving div element, which comes from the left to the current CSS definition of it.

Let’s define the css property of the element.

This css code will create a black rectangle which will be positioned “absolute” against the page body tag. The current position of our element is: left 250px and top 50px.
Our idea is to show how easily you can animate movement starting from left:0, going to the current 250px and then from top:0 moving to top: 50px.

The snippet of this animation definition follows a syntax:

The property percent in our object will be a segment of our time in seconds, when we call the method, which will run the animation.
See below: the properties left and top will apply.

The next step is to create a new CoherentAnimation object.

After that, we have to push an object in caFrom method.

The object follows a syntax:

In this sample, the object we are pushing has the following properties:

• selector: selects our element by id
• anims: it takes an object or array of objects.
• seconds: This is the duration of the animation in seconds. This property is optional. We could use it only if we want to declare a percent based animation. In our case we say that when the whole animation is 2 seconds, during the first second (0.5 percent) we will move the element from left:0 to left 250px; If we declare the animation duration to be 4 seconds, then the 0.5 percent will be 2 seconds.

In the end, we call play() method, which will run the animation. By default, the animation is always on pause and for that reason, we have to call play() at the end.

This was a very simple example how to create an animation. We will continue with an in-depth look at the usage of the Coherent Animation library in upcoming posts.