WriteIt.js can be downloaded from here, Or you can use
jsDelivr CDN.
Place the following script tag at the end of body tag.
<script src='https://cdn.jsdelivr.net/gh/khushit-shah/WriteIt.js@version/writeit.min.js'></script>WriteIt.js follows attribute based system, you can define an animation
by adding attributes. Combine multiple attributes and get different animations.
Following are all the attribute supported!
It animates the element for once and then animates infinite blinking cursor.
<p writeit-animate>Made with Love 💖</p>Made with Love 💖
It automatically starts animation of all the elements with writeit-*, you can define it in any tag
<body writeit-autostart>..body..</body>You can also start animation of all elements with javascript.
<script>WriteItJS.startAnimation()</script>It defines the cursor character.
<p writeit-char="🙂" writeit-animate>Always smile!</p>Always smile!
You can set cursor to any valid html.
<p writeit-char="<span style='color:red'>RED</span>" writeit-animate>Always smile!</p>redrrrr
Or even an image :)
<p writeit-char="<img src='/assets/img/sample.jpeg' width='16px'>" writeit-animate>Iron Man!</p>Iron Man!
Animates different words/senteces on same element. It first animates elements inner-text then it will check for writeit-replace-next attribute, if present it will animate them
<p writeit-replace-next="By,Khushit Shah" writeit-animate>Made With Love!</p>Made with Love!
You can add ',' into sentences by \,
<p writeit-replace-next="first\, still first, second" writeit-animate>arrays start from zero</p>Array starts from zero
Defines time in millis to animate in/out one character. If not defined uses random speed between 5.5-7.5ms per character. Animation speed may differ by ± 1 to give realistic typing effect
<p writeit-speed='7' writeit-animate>Made With Love!</p>
<p writeit-speed='8.4' writeit-animate>Made With Love!</p>Made with Love!
Made with Love!
Defines fixed time in millis to animate in/out one character, all characters will be animated at same rate.
<p writeit-speed-fixed='7' writeit-animate>Made With Love!</p>
<p writeit-speed-fixed='8.4' writeit-animate>Made With Love!</p>Made with Love!
Made with Love!
Starts the animation after some specified delay in seconds.
<p writeit-start-delay='5' writeit-animate>Take a deep breath for 5 seconds</p>Take a deep breath for 5 seconds
Continously loops the same animation.
<p writeit-loop writeit-animate>loop loop loop</p>loop loop loop
You can use writeit-loop with writeit-replace-next
<p writeit-loop writeit-replace-next='Hello, World!' writeit-animate>Hello</p>Hello
So, it continously repeats the animation for infinity.
Same as writeit-loop but also adds deleting animation.
<p writeit-loop-reverse writeit-animate>reverse loop loop loop</p>reverse loop loop loop
You can use writeit-loop-reverse with writeit-replace-next
<p writeit-loop-reverse writeit-replace-next='Hello, World!' writeit-animate>Hello</p>Hello
NOTE: writeit-loop or writeit-loop-reverse will only animate inner text of elements with writeit-replace-next attribute once.
Animates other elements after the current element is animated, it takes the selector for next elements seperated by ',' as value
<p writeit-next='#p1' writeit-animate>It will start animation of another element</p>
<p id='p1' writeit-animate>This will ne messed up...</p>It will start animation of another element
This will be messed up...
It gets messed up becouse animation of #p1 is already running and it starts animating the same node again So, we need to prevent #p1 from animating until it is from other element or startAnimationOfNode('#p1') is explicitly called. We can use writeit-has-prev or don't add writeit-animate attribute.
<p writeit-next='#p2' writeit-animate>It will start animation of another element</p>
<p id='p2' writeit-has-prev writeit-animate>This will work fine</p>It will start animation of another element
This will be work fine
Starting animation of multiple nodes
<p writeit-next='#p,#q' writeit-animate>It will start animation of another element</p>
<p id='p' writeit-has-prev writeit-animate>this Works</p>
<p id='q' writeit-has-prev writeit-animate>this Works</p>
It will start animation of another element
This Works
This Works
As you show in previous example next element is shown while the previous element is animating,
writeit-hidden can be used to hide an element until its animation is not started
<p writeit-next='#p2' writeit-animate>It will start animation of another element</p>
<p id='p3' writeit-hidden writeit-has-prev writeit-animate>This is invisible</p>It will start animation of another element
This is invisible
Will not animate infinite blinking cursor at the end!
<p writeit-no-blink writeit-animate>No blinking cursor 😱️ </p>No blinking cursor 😱️
All the text into $`` will not be animated and will be writtern in one throw.
${second} will pause the animation of given element for specified time.
<p writeit-animate>This is fast, wait${3} $`Finished!`</p>This is fast, wait ${3} $`Finished!`
if writeit-wait-in reverse is specified, animation will also get affected by ${} in reverse mode.
if writeit-write-all-in-reverse is specified, animation will also get affected by $`` in reverse mode.
wihtout attributes
With attributes
<p writeit-loop-reverse writeit-wait-in-reverse writeit-write-all-in-reverse writeit-animate>This is fast, wait${3},$`Finished!`..</p>This is fast, wait ${3} $`Finished!`..
Even though you don't need to write a single line of javascript but still there are some functions you can use.
1. startAnimation() - starts the parsing of web page and animation of all nodes.
2. startAnimationOfNode(<selector of node>) - starts the animation of node from start.
3. pauseAnimation(<selector of node>) - pauses animation of node.
4. resumeAnimation(<selector of node>) - resumes animation of node.
E.g using startAnimationOfNode() when the node becomes visible to user
