> ## Documentation Index
> Fetch the complete documentation index at: https://vctdocs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Animations

> Learn all the animations available for MINIMESSAGE with Voiid Countdown Timer

This plugin has its own built-in placeholders called “dynamics”, which you can use to create animations in the boss bar text. These placeholders are intended for animating colors and effects, which can only be used in the **MINIMESSAGE** format.

<Note>
  Remember that the `MINIMESSAGE` format requires **Paper 1.19.4+**, [you can find more information here.](/usage-guide/configuration#text-format%3A-legacy)
</Note>

## Available Placeholders for animations

### 1. `#dynamic#` (for RAINBOW)

* **Description**: This placeholder is used for for creating **rainbow**.
* **Range**: The value ranges from `10` (full offset) to `1` (minimal offset).
* **Example**:

  ```yaml theme={null}
  "<rainbow:#dynamic#>Rainbow animation with Voiid Countdown Timer (%HH%:%MM%:%SS%)</rainbow>"
  ```

<img src="https://mintcdn.com/vctdocs/6tWPiXFrXbNGtIlT/images/animations/rainbowdynamic.gif?s=0ad1163cc275106470b10dea67a7bf52" alt="Rainbowdynamic Gi" title="Rainbowdynamic Gi" className="mx-auto" style={{ width:"80%" }} width="513" height="48" data-path="images/animations/rainbowdynamic.gif" />

### 2. `#dynamic-g#` (for GRADIENTS)

* **Description**: This placeholder is used for for creating **gradients**.
* **Range**: The value ranges from `-1.0` (full gradient transition) to `1.0` (no transition), with increments of `0.1`.
* **Example**:

  ```yaml theme={null}
  "<gradient:#ff08ff:#fe994e:#fef502:red:#dynamic-g#>Gradient animation with Voiid Countdown Timer (%HH%:%MM%:%SS%)</gradient>"
  ```

<img src="https://mintcdn.com/vctdocs/6tWPiXFrXbNGtIlT/images/animations/gradientdynamic.gif?s=7cdbf3163625fcf25e9169546953bb74" alt="Gradientdynamic Gi" title="Gradientdynamic Gi" className="mx-auto" style={{ width:"78%" }} width="513" height="48" data-path="images/animations/gradientdynamic.gif" />

### 3. `#dynamic-g-l#` (for GRADIENTS)

* **Description**: This placeholder is used for for creating **gradients**. This is a variation of the previous one, specifically for people who don't like the sudden cut from `-1.0` to `1.0`.
* **Range**: The value ranges from `-1.0` (full gradient transition) to `1.0` (no transition), with increments of `0.1` (when it reaches -1.0) and `-0.1` (when it reaches 1.0).
* **Example**:

  ```yaml theme={null}
    "<gradient:blue:green:#dynamic-g-l#>Gradient animation with Voiid Countdown Timer (%HH%:%MM%:%SS%)</gradient>"
  ```

<img src="https://mintcdn.com/vctdocs/6tWPiXFrXbNGtIlT/images/animations/gradientloopdynamic.gif?s=2e24bb888d344e89dddd5e60f984559d" alt="Gradientloopdynamic Gi" title="Gradientloopdynamic Gi" className="mx-auto" style={{ width:"88%" }} width="583" height="53" data-path="images/animations/gradientloopdynamic.gif" />

### Changing the Animation Speed

You can change the speed of the animation by modifying the `refresh_ticks` setting in the `config.yml` file. The default value is `10`. If you want to reduce the animation speed, you can set a lower value, minimum is `1`.

In the `config.yml` file:

```yaml theme={null}
refresh_ticks: 10
```

### Animation with the opposite direction

You can animate the opposite direction by using the `#-dynamic#` or `#-dynamic-g#` placeholders. This will animate the color transition in the opposite direction.

For example, if you want it to go from green to red instead of red to green, you can do so with this code:

```yaml theme={null}
"<rainbow:#-dynamic#>Rainbow animation with Voiid Countdown Timer (%HH%:%MM%:%SS%)</rainbow>"
```