Alpine Typewriter is an awesome plugin based on Alpine.js that is used to add a typewriter effect to any HTML element.

Installation

Via Cdn

Include the following script tag in the of your document, just before Alpine.

<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-typewriter@latest/dist/alpine-typewriter.min.js" defer></script>

Via Npm

npm install @marcreichel/alpine-typewriter

Add the x-typewriter directive to your project by importing the package before starting Alpine.

import Alpine from 'alpinejs';
import Typewriter from '@marcreichel/alpine-typewriter';

Alpine.plugin(Typewriter);

Alpine.start();

Usage

Simply add the x-typewriter directive to any HTML element and provide the texts which should be cycled through.

<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter="texts"></span>

Adjust the speed

By default, a text stays for 2 seconds before being swapped out. This behavior may be adjusted using a modifier like so:

<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter.5s="texts"></span>

or

<span x-data="{ texts: ['Hello', 'World'] }" x-typewriter.3000ms="texts"></span>

For more details and source code, please visit Github.

Closing Note

If you have an amazing idea then Codebrisk is always here to convert your ideas into reality. Our team of qualified developers is trained in Laravel custom web app development, CRM software development, and e-commerce app development. We run with a superior level of agility and an immense Laravel ecosystem to customize the software for your business. For more details, please contact us or you can launch a project with us.