Typing Effect

This is an element that can be used to type text on to the screen.

+ Tailwind and Alpine

Copied!

<div 
    x-data="{
        text: '',
        textArray : ['Alpine JS is Amazing', 'It is Truly Awesome!', 'You Have to Try It!'],
        textIndex: 0,
        charIndex: 0,
        typeSpeed: 110,
        cursorSpeed: 550,
        pauseEnd: 1500,
        pauseStart: 20,
        direction: 'forward',
    }" 
    x-init="$nextTick(() => {
        let typingInterval = setInterval(startTyping, $data.typeSpeed);
    
        function startTyping(){
            let current = $data.textArray[ $data.textIndex ];
            
            // check to see if we hit the end of the string
            if($data.charIndex > current.length){
                    $data.direction = 'backward';
                    clearInterval(typingInterval);
                    
                    setTimeout(function(){
                        typingInterval = setInterval(startTyping, $data.typeSpeed);
                    }, $data.pauseEnd);
            }   
                
            $data.text = current.substring(0, $data.charIndex);
            
            if($data.direction == 'forward')
            {
                $data.charIndex += 1;
            } 
            else 
            {
                if($data.charIndex == 0)
                {
                    $data.direction = 'forward';
                    clearInterval(typingInterval);
                    setTimeout(function(){
                        $data.textIndex += 1;
                        if($data.textIndex >= $data.textArray.length)
                        {
                            $data.textIndex = 0;
                        }
                        typingInterval = setInterval(startTyping, $data.typeSpeed);
                    }, $data.pauseStart);
                }
                $data.charIndex -= 1;
            }
        }
                    
        setInterval(function(){
            if($refs.cursor.classList.contains('hidden'))
            {
                $refs.cursor.classList.remove('hidden');
            } 
            else 
            {
                $refs.cursor.classList.add('hidden');
            }
        }, $data.cursorSpeed);

    })"
    class="flex items-center justify-center mx-auto text-center max-w-7xl">
    <div class="relative flex items-center justify-center h-auto">
        <p class="text-2xl font-black leading-tight" x-text="text"></p>
        <span class="absolute right-0 w-2 -mr-2 bg-black h-3/4" x-ref="cursor"></span>
    </div>
</div>

Typing Effect Tutorial

If you want to learn more about how this functions, you may be interested in our extensive tutorial on how to Create a Typing Effect in AlpineJS.

Data

Below you will find the data properties available in the x-data attribute of this element.

Property and Description	Description
text	This is the variable that contains the current string being displayed.
This is the variable that contains the current string being displayed.
textArray	An array of strings to be typed on the screen.
An array of strings to be typed on the screen.
textIndex	This variable is used to keep track of which string in the textArray is currently being displayed.
This variable is used to keep track of which string in the textArray is currently being displayed.
charIndex	This is used to keep track of the current character index that is being typed onto the screen.
This is used to keep track of the current character index that is being typed onto the screen.
typeSpeed	In milliseconds, this is the speed that each character will be typed onto the screen.
In milliseconds, this is the speed that each character will be typed onto the screen.
cursorSpeed	In milliseconds, this is the speed that the cursor will blink on and off.
In milliseconds, this is the speed that the cursor will blink on and off.
pauseEnd	In milliseconds, this is the time that the typing will pause after the string has been typed onto the screen.
In milliseconds, this is the time that the typing will pause after the string has been typed onto the screen.
pauseStart	In milliseconds, this is the time that the typing will pause before each new string begins typing onto the screen.
In milliseconds, this is the time that the typing will pause before each new string begins typing onto the screen.
direction	This is the direction that the typing will occur. The options are 'forward' or 'backward'.
This is the direction that the typing will occur. The options are 'forward' or 'backward'.

Tooltip Video

Typing Effect

Data

Sponsors