Author: | khushit-shah |
---|---|
Views Total: | 208 views |
Official Page: | Go to website |
Last Update: | February 6, 2023 |
License: | MIT |
Preview:

Description:
WriteIt.js is a lightweight text animation library that applies a configurable typing animation to any text without any JS call.
How to use it:
1. Download the package and include the minified version of the WriteIt.js library on the page.
<script src="writeit.min.js"></script>
2. Add the writeit-animate
attribute to the element where the text will be output character by character just like a typewriter.
<h1 writeit-animate>CSSScript.com</h1>
3. Auto start the typing animation on page load.
<body writeit-autostart>
4. Or start the typing animation on demand.
WriteItJS.startAnimationOfNode(element); WriteItJS.startAnimation();
5. Config the animation speed with the writeit-speed
attribute:
<h1 writeit-animate writeit-speed="15"> CSSScript.com </h1>
// OR <h1 writeit-animate writeit-speed-fixed="7"> CSSScript.com </h1>
6. You can also use the library to create a text rotator with typing and deleting animations.
<h1 writeit-animate writeit-speed="15" writeit-replace-next="Google.com, Yahoo.com, ..."> CSSScript.com </h1>
7. Customize the cursor displayed at the end of the document while typing.
<h1 writeit-animate writeit-char="|"> CSSScript.com </h1>
8. Customize the cursor displayed at the end of the document while typing.
<h1 writeit-animate writeit-char="|"> CSSScript.com </h1>
// no blinking cursor <h1 writeit-animate writeit-char="|"> writeit-no-blink CSSScript.com </h1>
9. Determine the time to wait before starting the typing animation.
<h1 writeit-animate writeit-start-delay='5' CSSScript.com </h1>
10. Determine whether to loop through the animation.
<h1 writeit-animate writeit-loop CSSScript.com </h1>
// OR <h1 writeit-animate writeit-loop-reverse CSSScript.com </h1>
11. Animate multiple text in sequence.
<p writeit-next='#p2' writeit-animate>Text 1</p> <p id='p2' writeit-has-prev writeit-hidden writeit-animate>Text 2</p>
12. Pause the animation at a specific position.
<h1 writeit-animate writeit-speed="15"> CSSScript.com wait${5} $`Finished!` </h1>
// reverse <h1 writeit-animate writeit-speed="15" writeit-loop-reverse writeit-wait-in-reverse writeit-write-all-in-reverse> CSSScript.com wait${5} $`Finished!` </h1>
13. Pause/resume the typing animation.
WriteItJS.pauseAnimation(element); WriteItJS.resumeAnimation(element);
Changelog:
02/06/2023
- Bugfix