Animations

If you connect an element to another element with one of the ui4 attributes, and then animate the first element with CSS or Javascript, the connected element naturally animates with the first.

In this example we use CSS to animate the first element width on hover.

_{EXAMPLE 03.01}

<div id="first" dock="center">Hover over me</div>
<div id="second" dock="first.below" bottom="bottom"></div>

Open in full screen

The example above works because we did not use ui4 to fix the dimension that was animated with CSS, so there was no conflict. The next example is otherwise identical, but ui4 width keeps the width fixed, and hovering has no effect.

_{EXAMPLE 03.02}

<div id="first" dock="center" width="125">No hover for me</div>
<div id="second" dock="first.below" bottom="bottom"></div>

Open in full screen

To stick to the principle of locality, and to avoid issues of CSS and ui4 conflicting, we can apply animations as a part of the constraint directly, as in the following example:

_{EXAMPLE 03.03}

<div id="first" dock="center:1s" width="125" height="50">Hello!</div>

Open in full screen

ui4 JS interface can also be used to set animated constraints in event handlers:

_{EXAMPLE 03.04}

<button id="first" dock="center" width="125" height="50"
        onclick="ui4.set('second', 'top=first.top:0.3s')">
    Hello
</button>
<button id="second" frame="first.frame" 
        onclick="ui4.set(this, 'top=first.bottom:0.3s')">
    Click me
</button>

Open in full screen

Animations often require one thing happening after another. They can be chained with the arrow syntax:

_{EXAMPLE 03.05}

<div id="first" centery="centery" ui4="left=right >>> left=free >>> centerx=centerx:0.5s"></div>

Open in full screen

Here we first place the element just outside the right edge, without animation, then animate the element to the center. This requires also explicitly freeing the left edge.