Animated Text Maker

📝 Animated Text Maker – User Guide

Create beautiful animated text with full control over appearance, animation styles, and export settings. Ideal for creators, designers, and content makers.


📌 Getting Started

  1. Open the tool (in your browser or from your site).
  2. The screen is split into two:
    • Left column: All the controls.
    • Right column: A live preview canvas.

✏️ 1. Text & Font

  • Your Text: Enter what you want to animate.
  • Transform: Set text to:
    • None
    • UPPERCASE
    • lowercase
    • Capitalize
  • Letter Spacing: Adjust the spacing between letters.
  • Font & Size: Choose from preset fonts or upload your own.
  • Line Height: Spacing between lines of text.
  • Offset X/Y: Move the text horizontally or vertically.
  • Load Custom Font: Upload a .ttf, .otf, .woff, or .woff2 file.

🎨 2. Appearance

  • Text Color / Background Color
  • Transparent Background: Enables clear backgrounds (important for overlays).
  • Background Image: Upload an image to use as background.
    • Choose fit: Cover, Contain, or Stretch.
    • Adjust position with X/Y offset.
  • Drop Shadow:
    • Enable or disable it.
    • Customize color, blur, and offset.

🌀 3. Animation

  • Style: Choose from 18 styles:
    • Bounce, Fade, Slide In, Scale, Rotate, Wave, Stomp, Jitter, Typing, Flicker, Scan Line, Drop In, Swing, Random, Blur In, Glitch, Neon Glow.
  • Animate By: Characters, Words, or Lines.
  • Speed: How fast the animation cycles.
  • Amplitude: How strong the movement or effect is.
  • Stagger Delay: Adds delay between animated parts (optional).

🔧 Some animations show extra options:

  • Slide: Direction.
  • Flicker/ScanLine: Color + density.
  • Typing: Cursor style.
  • Glitch: Shift intensity.
  • Neon: Glow color.

💾 4. Export

  • Export as Animated GIF
  • Crop to Content: Automatically crops blank space.
  • Custom Width / Height: Set the output resolution.
  • Export Button: Click to render and download the animation as a .gif.

📂 5. Session Tools

  • Import Settings: Load a .json file with saved options.
  • Export Settings: Save your current setup as a .json file.
  • Clear All: Reset the tool (with confirmation).

🧠 Tips

  • Preview updates live — adjust sliders and see changes instantly.
  • GIF export might take a few seconds.
  • For transparent exports, avoid complex GIF backgrounds — use PNG (if supported in future updates).

🛠️ Troubleshooting

  • If the export button says “Loading Libraries…” – wait a few seconds for GIF.js to load.
  • Use a modern browser (like Chrome or Firefox) for best results.
  • Clear browser cache or use “Clear All” if the interface acts up.