AnimType ✍️

A lightweight, zero-dependency Vanilla JavaScript library for creating a smooth, infinite typing and deleting animation effect.

Now powered by requestAnimationFrame for smoother animations and better performance.

Perfect for hero sections, landing pages, and dynamic UI text.

✨ Features

• ⚡ Zero dependencies
• 🔁 Infinite typing loop
• 🎯 Per-element configuration (HTML or JS)
• ⚡ Powered by requestAnimationFrame
• 🎛️ Custom typing & deleting speeds
• 🧠 Smart state handling (no duplicate loops)
• 🛑 Start / Stop control
• 📦 Tiny bundle size

📦 Installation

npm install @jaoppires/animtype

🚀 Quick Start

HTML

<span
  class="typewriter"
  data-texts='["Developer", "Designer", "Creator"]'
  data-time="2000">
</span>

JavaScript (Basic)

import AnimType from '@jaoppires/animtype';

const element = document.querySelector('.typewriter');

const animation = AnimType();
animation.start(element);

JavaScript (Advanced Configuration)

import AnimType from '@jaoppires/animtype';

const animation = AnimType({
  texts: ["Developer", "Designer", "Creator"],
  typingSpeed: 120,
  deletingSpeed: 60,
  pauseTime: 2000
});

animation.start(document.querySelector('.typewriter'));

⚙️ Configuration

HTML Attributes

| Attribute | Type | Default | Description | | ------------ | ------------------ | ------- | ------------------ | | data-texts | Array | String | [] | Words to animate | | data-time | Number | 2000 | Pause after typing |

JavaScript Options

| Option | Type | Default | Description | | --------------- | -------- | ------- | ---------------------------- | | texts | Array | [] | Words to animate | | typingSpeed | Number | 100 | Typing speed (ms per char) | | deletingSpeed | Number | 50 | Deleting speed (ms per char) | | pauseTime | Number | 2000 | Pause after full word |

🧠 API

AnimType(options?)

Creates a new animation instance.

start(element)

Starts animation on a DOM element.

animation.start(element);

• Resets internal state
• Prevents duplicate loops
• Parses data-* attributes if needed

stop()

Stops the animation safely.

animation.stop();

🧩 Multiple Elements

document.querySelectorAll('.typewriter').forEach(el => {
  const anim = AnimType({
    typingSpeed: 120,
    deletingSpeed: 60
  });

  anim.start(el);
});

💡 Blinking Cursor (Optional)

.typewriter::after {
  content: '|';
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

⚡ Performance Notes

• Uses requestAnimationFrame for smoother animations
• Avoids unnecessary DOM updates
• Prevents duplicate animation loops
• More efficient than setTimeout-based implementations

📌 Best Practices

• Use one instance per element
• Call stop() when removing elements (SPA environments)
• Prefer JSON format for data-texts
• Use JavaScript configuration for advanced control

🛣️ Roadmap

• [ ] TypeScript support
• [x] requestAnimationFrame version
• [x] Custom speed control (typing/deleting)
• [ ] Events (onType, onDelete, onLoop)

🤝 Contributing

Contributions are welcome!

1. Fork the repository
2. Create a branch (feature/my-feature)
3. Commit your changes
4. Open a Pull Request

📄 License

MIT © João Paulo Pires