logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Code Examples
  • Themes
  • Streaming
    • Syntax Processing
    • Animation Effects
  • Components
    • Overview
    • Think
    • DataChart
    • Custom Component
  • Plugins
    • Overview
    • Latex
    • HighlightCode
    • Mermaid
    • CustomPlugins
    • Theme & Locale

Animation Effects

Add elegant animation effects to streaming rendered content, supporting progressive text display to enhance user reading experience.

Code Demo

API

streaming

ParameterDescriptionTypeDefault Value
hasNextChunkWhether there is subsequent databooleanfalse
enableAnimationEnable text fade-in animationbooleanfalse
animationConfigText animation configurationAnimationConfig{ fadeDuration: 200, easing: 'ease-in-out' }

AnimationConfig

PropertyDescriptionTypeDefault Value
fadeDurationFade-in animation duration (milliseconds)number200
easingAnimation easing functionstring'ease-in-out'

FAQ

Animation effects not working?

A: Please check the following conditions:

  • Is enableAnimation set to true
  • Is hasNextChunk properly controlled
  • Does the browser support CSS3 animations

Animation causing performance issues?

A: Recommended optimizations:

  • Reduce fadeDuration time
  • Use linear easing function
  • Render large amounts of content in batches
Streaming Animation Effects
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code