A lightweight JavaScript library that animates text like a typewriter when it enters the viewport.
Smooth character-by-character animation
Different speeds for mobile and desktop
Animations start when elements enter viewport
Only 12.1KB with zero dependencies
Paste this Script just before </body> in your HTML:
<script src="https://cdn.jsdelivr.net/gh/AsadullahAlMunib/TTAS@v1.3.1/ttas.js"></script>
Add the data-ttas attribute to any HTML element with text content.
This text will animate over 3 seconds when scrolled into view:
<p data-ttas="3000">
This text will animate over 3 seconds when scrolled into view.
</p>
Different speeds for different devices. 2 seconds on mobile, 4 seconds on desktop:
<p data-ttas="2000,4000">
This text animates faster on mobile devices (2s) than on desktop (4s).
</p>
Show text immediately without animation:
<p data-ttas="">
This text appears immediately without any animation.
</p>
You can set the Offset. Also, different Speeds and Offsets together for specific devices (Mobile & Computer).
Trigger the animation 100px before the element enters the viewport:
<p data-ttas="2500;100">
This animation triggers 100px before entering the viewport.
</p>
Different speeds for mobile and desktop with a single offset value:
<p data-ttas="2000,4000;100">
Mobile: 2 seconds, Desktop: 4 seconds, Both trigger 100px early.
</p>
Same speed for both devices but different trigger offsets:
<p data-ttas="3000;50,100">
Same 3-second animation, Mobile: 50px offset, Desktop: 100px offset.
</p>
Full control for both devices. Different speeds and offsets for mobile and desktop:
<p data-ttas="1500,3000;50,100">
This has different speeds and offsets for mobile and desktop devices.
</p>
TTAS supports various text formatting options that animate seamlessly with the typewriter effect.
Text with bold formatting that will animate with the typewriter effect:
<p data-ttas="3000">
This text contains <strong>bold text</strong> that will animate with the rest of the content.
</p>
Text with italic formatting that will animate character by character:
<p data-ttas="3000">
This text contains <em>italicized text</em> that will animate character by character.
</p>
Text with underline formatting for emphasis:
<p data-ttas="3000">
This text has <u>Underline Text</u> that will animate with Underline.
</p>
Text containing Clickable links that animate with the typewriter effect:
<p data-ttas="3000">
Visit our <a href="https://github.com/AsadullahAlMunib/TTAS/">WEBSITE</a> for more information about TTAS library.
</p>
Text containing code elements that will animate with the typewriter effect:
<p data-ttas="3000">
Use the <code>data-ttas</code> attribute with your HTML elements to enable the typing animation effect on scroll.
</p>
data-ttas attribute with your HTML elements to enable the typing animation effect on scroll.Text with multiple formatting options and links:
<p data-ttas="5000">
The <strong>TTAS Library</strong> allows you <em>to create beautiful</em> Typewriter Animations by <code>data-ttas</code> Attribute with support for <u>Formatted text</u> and even <a href="#">Clickable Links</a> that animate smoothly.
</p>
data-ttas Attribute with support for Formatted text and even Clickable Links that animate smoothly.TTAS exposes a global API for control and customization.
Although none of this needs to be written to use TTAS animation; just using the CDN link is enough to get the animation ready.
//Initialize or reinitialize TTAS
TTAS.init();
//Remove all TTAS functionality
TTAS.destroy();
if (TTAS.supportsObserver) {
console.log('IntersectionObserver is supported' + TTAS.supportsObserver);
}
console.log('TTAS version:', TTAS.version);
You can customize the blinking cursor with CSS:
.ttas-cursor {
background-color: #ff5722;
width: 3px;
animation: ttas-blink 0.8s infinite;
}