Text Morph SVG effect
Cool svg mask morphing effect between different texts. To modify the various strings, just separate them with a | character. The effect will work on the text with the class [<span class="class-tag">]morph[</span>] . You can change the duration of the effect by modifying the following attribute, the duration is express in seconds.
Glitch Effect
Glitch effect made with simple css keyframes and title attribute
Split Word Hover Effect
Splitted word that move up on hover
Glitch CRT Effect
Glitch CRT effect made with simple css keyframes to mimic old televisions.
Break the code barrier
Mira Text Effect
Cool effect made with Anime.js. You can change duration of the effect and loop delay by modifying the attributes below, times are set in milliseconds. Delete loop-delay attribute or set it to 0 to disable loop.
Break the code barrier
Izar Text Effect
Cool effect made with Anime.js. You can change duration of the effect and loop delay by modifying the attributes below, times are set in milliseconds. Delete loop-delay attribute or set it to 0 to disable loop.
Break the code barrier
Izar Text Effect
Cool effect made with Anime.js. You can change duration of the effect and loop delay by modifying the attributes below, times are set in milliseconds. Delete loop-delay attribute or set it to 0 to disable loop.
Countup
Countup effect that will count from 0 to the number you've set inside the text block. You can customize the behaviour by changing the following attributes
Animation Type
You can change the easing effect by changing the value with one of the following:
- backInOut
backIn
backOut - bounceOut
bounceInOut
bounceIn - circInOut
circIn
circOut - cubicInOut
cubicIn
cubicOut - elasticInOut
elasticIn
elasticOut - expoInOut
expoIn
expoOut - quadInOut
quadIn
quadOut - quartInOut
quartIn
quartOut - quintInOut
quintIn
quintOut - sineInOut
sineIn
sineOut - linear
- ease
Number of digits
You can change the number format to be a double, by changing the value from 0 to 2 for example.
Duration of the animation (expressed in seconds)
Typewriter Loop Effect
Easy way to make a typewriter loop effect wih minimal js. Below the attributes for the configuration
Texts
The first text that will be looped is the one you add in the text block, the other texts must be added inside the attribute value, separate them using a | character
Color of the cursor
This allow you to change the color of the typewriter cursor
Duration of the writing animation (expressed in milliseconds)
Duration of the deleting animation (expressed in milliseconds)
