# What's new in v2.5.3
- [What's new in v2.5.3](#whats-new-in-v253)
- [`zIndex` utilities](#zindex-utilities)
- [Boxicons Font v2.0.9!](#boxicons-font-v209)
- [We are still experimenting with the recently added `create` command](#we-are-still-experimenting-with-the-recently-added-create-command)
- [Set `rotate`, `scale` and `anchorPoints` in `open:` and `close:` states](#set-rotate-scale-and-anchorpoints-in-open-and-close-states)
- [A more complex UI with animations](#a-more-complex-ui-with-animations)
## `zIndex` utilities
Utilities for controlling the stack order of an element.
```css
// Component(s): Ti.UI.Animation, Ti.UI.View
// Property(ies): zIndex
'.z-0': { zIndex: 0 }
'.z-10': { zIndex: 10 }
'.z-20': { zIndex: 20 }
'.z-30': { zIndex: 30 }
'.z-40': { zIndex: 40 }
'.z-50': { zIndex: 50 }
```
## Boxicons Font v2.0.9!
Added a beatufil library of icons called [Boxicons](https://boxicons.com).
A High Quality web friendly icons
'Boxicons' is a carefully designed open source iconset with 1500+ icons. It's crafted to look enrich your website/app experience.
To copy the new font file to your project use:
```bash
> purgetss fonts --vendor="boxicons"
# alias:
> purgetss f -v=bx
```
Add the `--modules` flag to also copy the corresponding CommonJS module into `./app/lib/` folder:
```bash
> purgetss fonts --vendor="boxicons" --modules
# alias:
> purgetss f -v=bx -m
```
We are keeping the prefixes of boxicons classes in the `boxicons.js` file to prevent unexpected results, because there are three sets of icons in the same font file: **Logos, Regular and Solid**.
- Regular: `bx-flag` becomes `bxFlag`
- Solid: `bxs-flag` becomes `bxsFlag`
- Logos: Almost all the logos have no conflict with other classes, because almost all have unique names, except for one: `bxl-windows` and `bx-windows`. That's why we are also keeping the prefix for all `logos` variants, so they become: `bxlWindows` for example.
## We are still experimenting with the recently added `create` command
We temporary remove a second error check in order to continue with the creation and installation process.
We've also added the `--vendor` argument to specify which icon font you'd like to install.
```bash
> purgetss create 'Name of the Project' [--vendor="fontawesome, materialicons, lineicons, boxicons"]
# alias:
> purgetss c 'Name of the Project' [-v=fa,md,li,bx]
```
Please check the complete instructions [here](../../README.md#create-experimental)
## Set `rotate`, `scale` and `anchorPoints` in `open:` and `close:` states
Now you can set `rotate`, `scale` and `anchorPoints` separately when opening or closing states.
```xml
```
```javascript
$.index.open();
$.myRotation.play($.chevron);
function doRotate() {
$.myRotation.play($.chevron);
}
```
## A more complex UI with animations
First you'll need to install FontAwesome Fonts in your project by running:
```bash
> purgetss fonts -v=fa
```
```xml
```
```javascript
$.index.open();
// Both animations has the `rotate-90` set,
// so we can use apply to `hide` the animation from showing at startup
$.myAnimationChevron.apply($.chevy);
$.myCardAnimationChevron.apply($.myCardChevron);
function doAnimation(e) {
$.myAnimation.play($.navBar);
$.myAnimationChevron.play($.chevy);
}
function myCardClicked() {
$.myCardAnimation.play($.myCard);
$.myCardAnimationChevron.play($.myCardChevron);
}
function doAction(e) {
if (e.source.action) {
$.action.text = ` do Action: ${e.source.action}`;
}
}
```
***\* low framerate gif***
***\* low framerate gif***