> For the complete documentation index, see [llms.txt](https://docs.icraft.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.icraft.design/editor-features/animation-editing/element-animation.md).
# Element Animation
**Element Animation** is the core of the animation system. It applies visual motion and state changes to individual elements, lines, or tubes within a scene to represent processes, energy/media flow, equipment operation, or highlight key components.
Element Animations are divided into three main categories:
* **General Element Animations** (visual and interactive effects)
* **Line Animations** (path drawing and flow indication)
* **Tube Animations** (physical/energy/fluid flow visualization inside tubes)
Each category is described below, including its purpose and configurable parameters.
***
## General Element Animations
*(Applicable to system models, asset library models, and imported models)*
These animations are used for highlighting, guiding attention, or representing element states.
### Common Parameters
* **Duration**: Time for the animation to complete (seconds)\
Default: 3s\
Range: `0~Limitless`
* **Delay**: Time before the animation starts after being triggered (seconds)
Default: 0s\
Range: `0~Limitless`
* **Tip Visible**: Toggle to display a tip during animation playback (default: off)
### Animation Types
#### **Fade In**
Gradually makes an element visible.\
**Use case:** Introducing or highlighting objects\
**Tip:** 0.5–2s for natural transitions
***
#### **Fade Out**
Gradually hides an element.\
**Use case:** Ending a process or temporarily hiding objects\
**Tip:** Often paired with Fade In
***
#### **Floating Up and Down**
Moves the element up and down slowly.\
**Use case:** Emphasizing or simulating floating/active states
***
#### **Heartbeat**
Creates a rhythmic scaling effect.\
**Use case:** Alerts or key components
***
#### **Bouncing**
Vertical bouncing motion.\
**Use case:** Drawing attention or indicating triggered events
***
#### **Rotate**
Rotates around the Z-axis.\
**Use case:** Equipment operation (e.g., fans, indicators)
***
#### **Breathing Line Frame**
Creates a pulsing outline effect around the element.
**Parameters:**
* **Color** (default: `#FFEE00`)
* **Breathing Frequency** (default: 2, range: `0.1–5`)
* **Line Width** (default: 0.05, range: `0.01–0.2`)
***
#### **Flow Line Frame**
Creates a flowing effect along the outline.
**Parameters:**
* **Color** (default: `#FFEE00`)
* **Speed** (default: 1, range: `0.1–5`)
* **Line Width** (default: 0.05, range: `0.01–0.4`)
***
#### **Pulse Ring**
Expanding ripple effect from the center.
**Parameters:**
* **Color** (default: `#00FFFF`)
* **Emission Rate** (default: 0.3, range: `0.1–1`)
* **Max Radius** (default: 10, range: `1–20`)
***
#### **Self Animation**
Plays built-in animations within the model (e.g., character actions).
**Parameters:**
* **Speed** (default: 2.2, range: `0–10`)
* **Loop Playback** (default: on)
***
#### **Enter Sub-Scene**
Triggers entry into a Sub-scene bound to the element.
**Notes:**
* Typically switches camera automatically
* Can continue playing animations within the Sub-scene
* Often used together with **Exit Sub-scene**
***
## Line Animations
(Applicable to line elements)
Line Animations emphasize path creation, drawing, and flow direction. Commonly used in architecture diagrams, flowcharts, and tubeline guidance.
### Common Parameters
Same as general animations: Duration, Delay, Show Tooltip
### Animation Types
#### **Drawing**
The line is drawn segment by segment from start to end. Suitable for demonstrating line establishment or step‑by‑step process unfolding.
**Parameters:**
* **Speech Tooltip**: Dynamic bubble text floating above the line and appearing sequentially during drawing. Editable in the text box; default: empty.
* **Tooltip Background Color** : Customizable via color picker; default: `#FFFFFF`.
***
#### **Flowing**
Streamlines or particles move along the line to show medium/signal direction and speed.
**Parameters:**
* **Speech Tooltip**: Dynamic bubble text floating above the line during animation; default: empty.
* **Tooltip Background Color**(default: `#FFFFFF`)
* **Flowing Color**: Color of flowing light effects; default: `#18A1FF`.
* **Thickness Scale**: Ratio of streamline thickness to original line diameter; default: 0.1; range: `0.1–1`.
* **Length Scale**: Ratio of each streamline segment length to the path; default: 0.1; range: `0.1–1`.
***
#### **Loop Flowing**
Continuous cyclic flow along the line. Suitable for persistent transmission or long‑term states (e.g., continuous data flow).
**Parameters:**
* **Flowing Color**: Color of flowing light effects; default: `#18A1FF`.
* **Thickness Scale**: default: 0.1; range: `0.1–1`.
* **Length Scale**: default: 0.1; range: `0.1–1`.
***
***
## Tube Animation
Tube Animation visualizes physical/energy flow inside tubes. For realistic working conditions, configure color, speed, density, fluctuation, etc.In addition to universal **Duration** and **Delay**, the following are common to all tube animations:
* **Flow Speed**: Rate at which textures or particles move along the path; default: 2; range: `0.1–10`.
* **Primary Color**: Core hue of the flow effect (main visual color of the fluid).
* **Secondary Color**: Complementary color to enhance layering, detail, and 3D effect.
* **Reverse Flow**: Toggle to switch flow direction; default **Off** (forward flow).
#### Zebra Line Flow
**Purpose**: Alternating color bands flow along the tube to emphasize direction and speed. Suitable for visualizing banded media or quick flow direction indication.
**Special Parameters**:
* **Stripe Length**: Length of primary‑color stripes in the tube; default: 1; range: `0.1–100`.
**Recommendation**: Match stripe length with flow speed (short stripes + high speed = clearer effect). Use moderate color contrast to avoid visual fatigue.
***
#### Water Flow
**Purpose**: Simulates water flow with optional foam and fluctuation for realism.
**Special Parameters**:
* **Bubble Density**: Frequency and density of white bubbles on the fluid surface; default: 30; range: `1–50`.
* **Volatility**: Distortion amplitude of the fluid surface; default: 0.1; range: `0–1`.
**Recommendation**: Moderate foam density and low wave intensity improve naturalness. Light primary colors are often used for clear water.
***
#### Arrow Flow
**Purpose**: Arrows move along the tube to indicate direction. Intuitive for process and logistics demonstrations.
**Special Parameters**:
* **Arrow Size**: Scale of individual arrow icons in 3D space; default: 0.25; range: `0.1–1`.
* **Arrow Quantity**: Total arrows visible simultaneously along the tube; default: 8; range: `2 ~ infinity`.
**Recommendation**: Match arrow count to tube length. Increase arrows on long tubes to maintain direction clarity.
***
#### Energy Flow
**Purpose**: Visualizes energy/signal transmission (supports color gradients). Often used in power and energy management systems.
**Recommendation**: Use color gradients (Primary → Secondary) to enhance dynamism.
***
#### Light Flow
**Purpose**: Simulates light beams or pulses traveling along tubes (highly visual and decorative).
***
#### Electronic Flow
**Purpose**: Shows electronic/data packet transmission in wires or channels (density configurable).
**Special Parameters**:
* **Electron Density**: Number of electronic particles per unit tube length; default: 16; range: 1–32.
**Recommendation**: Density reflects particle count; high density for high‑throughput scenarios. Use shade variations of the same color to indicate speed/energy.
***
#### Gas Flow
**Purpose**: Shows gas flow in tubes/channels, typically softer with diffusion effects.
***
#### Tube Growth
* **Purpose**: The tube is drawn from start to end, demonstrating line laying or construction processes.
* **Recommendation**: Used for construction/wiring demos. Match growth speed with steps for segment‑by‑segment presentation.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.icraft.design/editor-features/animation-editing/element-animation.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.