Top Related Projects
A simple yet powerful native javascript plugin for a cool typewriter effect.
JavaScript 3D Library.
JavaScript animation engine
Quick Overview
Typed.js is a JavaScript library that creates a typing animation effect for text on web pages. It simulates the appearance of text being typed out in real-time, offering customizable options for speed, backspacing, and looping.
Pros
- Easy to implement and customize
- Lightweight and dependency-free
- Supports multiple instances on a single page
- Offers various options for timing and styling
Cons
- Limited to text-based animations
- May not be suitable for complex, multi-line typing effects
- Potential performance impact on pages with multiple instances
- Requires JavaScript to function, which may not be ideal for all use cases
Code Examples
- Basic usage:
let typed = new Typed('#element', {
strings: ['Hello, World!', 'Welcome to Typed.js'],
typeSpeed: 50
});
This code creates a typing animation for the strings "Hello, World!" and "Welcome to Typed.js" inside the element with the ID "element".
- Using HTML tags in strings:
let typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
backSpeed: 30
});
This example demonstrates how to use HTML tags within the strings and includes a backspacing effect.
- Customizing the cursor:
let typed = new Typed('#element', {
strings: ['Type with style'],
typeSpeed: 50,
cursorChar: '_',
loop: true
});
This code customizes the cursor character and enables looping of the animation.
Getting Started
- Include the Typed.js library in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
- Add an element to your HTML where you want the typing animation to appear:
<span id="element"></span>
- Initialize Typed.js in your JavaScript:
let typed = new Typed('#element', {
strings: ['Your strings', 'go here'],
typeSpeed: 50
});
- Customize the options as needed, referring to the documentation for additional features and settings.
Competitor Comparisons
A simple yet powerful native javascript plugin for a cool typewriter effect.
Pros of TypewriterJS
- More customizable options for cursor styles and animations
- Supports multiple instances on a single page without conflicts
- Offers a more extensive API for advanced control and manipulation
Cons of TypewriterJS
- Slightly larger file size compared to Typed.js
- Less widespread adoption and community support
- May have a steeper learning curve for beginners
Code Comparison
TypewriterJS:
const typewriter = new Typewriter('#element', {
loop: true,
delay: 75,
});
typewriter
.typeString('Hello World!')
.pauseFor(2500)
.deleteAll()
.start();
Typed.js:
var typed = new Typed('#element', {
strings: ['Hello World!'],
typeSpeed: 75,
backSpeed: 50,
loop: true
});
Both libraries offer similar core functionality for creating typewriter effects on web pages. TypewriterJS provides more granular control over the typing process and cursor behavior, while Typed.js offers a simpler API that may be easier for beginners to use. The choice between the two depends on the specific requirements of your project and your familiarity with JavaScript libraries.
JavaScript 3D Library.
Pros of Three.js
- Comprehensive 3D graphics library for creating complex 3D scenes and animations
- Large, active community with extensive documentation and examples
- Supports various rendering techniques and advanced features like VR and AR
Cons of Three.js
- Steeper learning curve due to its complexity and extensive API
- Larger file size, which may impact page load times for simpler projects
- Overkill for basic text animation tasks
Code Comparison
Three.js (3D cube):
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
Typed.js (Text animation):
var typed = new Typed('#element', {
strings: ['First sentence.', 'Second sentence.'],
typeSpeed: 50,
});
Three.js is a powerful 3D graphics library, while Typed.js focuses on text animation. Three.js offers more capabilities for complex visualizations but requires more setup. Typed.js provides a simpler solution for text-based animations with minimal configuration.
JavaScript animation engine
Pros of Anime
- More versatile animation library, capable of animating various properties beyond just text
- Offers a wider range of easing functions and timeline controls
- Smaller file size, which can lead to faster load times
Cons of Anime
- Steeper learning curve due to more complex API and options
- May be overkill for simple text animations, where Typed.js excels
- Less focused on typing animations specifically
Code Comparison
Typed.js:
new Typed('#element', {
strings: ['First sentence.', 'Second sentence.'],
typeSpeed: 30
});
Anime:
anime({
targets: '#element',
innerHTML: ['First sentence.', 'Second sentence.'],
easing: 'linear',
duration: 2000,
delay: 1000
});
While both libraries can achieve similar text animation effects, Typed.js is more specialized for typing animations, offering a simpler API for this specific use case. Anime, on the other hand, provides a more comprehensive animation toolkit that can be applied to various elements and properties beyond just text.
Typed.js is ideal for projects that primarily require typing animations, while Anime is better suited for more complex and diverse animation needs across a web application.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Live Demo | View All Demos | View Full Docs | mattboldt.com
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
Installation
CDN
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
For use directly in the browser via <script>
tag:
<!-- Element to contain animated typing -->
<span id="element"></span>
<!-- Load library from the CDN -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<!-- Setup and start animation! -->
<script>
var typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
</script>
</body>
As an ESModule
For use with a build tool like Vite, and/or in a React application, install with NPM or Yarn.
NPM
npm install typed.js
Yarn
yarn add typed.js
General ESM Usage
import Typed from 'typed.js';
const typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
ReactJS Usage
import React from 'react';
import Typed from 'typed.js';
function MyComponent() {
// Create reference to store the DOM element containing the animation
const el = React.useRef(null);
React.useEffect(() => {
const typed = new Typed(el.current, {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
return () => {
// Destroy Typed instance during cleanup to stop animation
typed.destroy();
};
}, []);
return (
<div className="App">
<span ref={el} />
</div>
);
}
More complex hook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/
Class component: https://jsfiddle.net/mattboldt/ovat9jmp/
Use with Vue.js
Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js
Use it as WebComponent
Check out the WebComponent: https://github.com/Orlandster/wc-typed-js
Wonderful sites that have used (or are using) Typed.js
https://github.com/features/package-registry
http://testdouble.com/agency.html
https://www.capitalfactory.com
Strings from static HTML (SEO Friendly)
Rather than using the strings
array to insert strings, you can place an HTML div
on the page and read from it.
This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script>
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
Type Pausing
You can pause in the middle of a string for a given amount of time by including an escape character.
var typed = new Typed('#element', {
// Waits 1000ms after typing "First"
strings: ['First ^1000 sentence.', 'Second sentence.'],
});
Smart Backspacing
In the following example, this would only backspace the words after "This is a"
var typed = new Typed('#element', {
strings: ['This is a JavaScript library', 'This is an ES6 module'],
smartBackspace: true, // Default value
});
Bulk Typing
The following example would emulate how a terminal acts when typing a command and seeing its result.
var typed = new Typed('#element', {
strings: ['git push --force ^1000\n `pushed to origin with option force`'],
});
CSS
CSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:
/* Cursor */
.typed-cursor {
}
/* If fade out option is set */
.typed-fade-out {
}
Customization
var typed = new Typed('#element', {
/**
* @property {array} strings strings to be typed
* @property {string} stringsElement ID of element containing string children
*/
strings: [
'These are the default values...',
'You know what you should do?',
'Use your own!',
'Have a great day!',
],
stringsElement: null,
/**
* @property {number} typeSpeed type speed in milliseconds
*/
typeSpeed: 0,
/**
* @property {number} startDelay time before typing starts in milliseconds
*/
startDelay: 0,
/**
* @property {number} backSpeed backspacing speed in milliseconds
*/
backSpeed: 0,
/**
* @property {boolean} smartBackspace only backspace what doesn't match the previous string
*/
smartBackspace: true,
/**
* @property {boolean} shuffle shuffle the strings
*/
shuffle: false,
/**
* @property {number} backDelay time before backspacing in milliseconds
*/
backDelay: 700,
/**
* @property {boolean} fadeOut Fade out instead of backspace
* @property {string} fadeOutClass css class for fade animation
* @property {boolean} fadeOutDelay Fade out delay in milliseconds
*/
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500,
/**
* @property {boolean} loop loop strings
* @property {number} loopCount amount of loops
*/
loop: false,
loopCount: Infinity,
/**
* @property {boolean} showCursor show cursor
* @property {string} cursorChar character for cursor
* @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
*/
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
/**
* @property {string} attr attribute for typing
* Ex: input placeholder, value, or just HTML text
*/
attr: null,
/**
* @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
*/
bindInputFocusEvents: false,
/**
* @property {string} contentType 'html' or 'null' for plaintext
*/
contentType: 'html',
/**
* Before it begins typing
* @param {Typed} self
*/
onBegin: (self) => {},
/**
* All typing is complete
* @param {Typed} self
*/
onComplete: (self) => {},
/**
* Before each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
preStringTyped: (arrayPos, self) => {},
/**
* After each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
onStringTyped: (arrayPos, self) => {},
/**
* During looping, after last string is typed
* @param {Typed} self
*/
onLastStringBackspaced: (self) => {},
/**
* Typing has been stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingPaused: (arrayPos, self) => {},
/**
* Typing has been started after being stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingResumed: (arrayPos, self) => {},
/**
* After reset
* @param {Typed} self
*/
onReset: (self) => {},
/**
* After stop
* @param {number} arrayPos
* @param {Typed} self
*/
onStop: (arrayPos, self) => {},
/**
* After start
* @param {number} arrayPos
* @param {Typed} self
*/
onStart: (arrayPos, self) => {},
/**
* After destroy
* @param {Typed} self
*/
onDestroy: (self) => {},
});
Contributing
View Contribution Guidelines
end
Thanks for checking this out. If you have any questions, I'll be on Twitter.
If you're using this, let me know! I'd love to see it.
It would also be great if you mentioned me or my website somewhere. www.mattboldt.com
Top Related Projects
A simple yet powerful native javascript plugin for a cool typewriter effect.
JavaScript 3D Library.
JavaScript animation engine
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot