Setting Up The Typewriter Effect Without CSS
Tags: svelte, webdev, programming, tutorial
Published: 2022-06-01 14:16:21

I'll highly recommend you pick up Svelte and go through their tutorial as this article is going to cover a particular part, on custom JS transitions.

## Getting Started

Go ahead and initialise our new project using the Svelte playground from [CodeSandbox](https://codesandbox.io/?from-app=1) or use one of their boilerplates available on [Github](https://github.com/sveltejs).  

```
# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install
```
...then start Rollup. 

```
npm run dev
```
Navigate to localhost:8080 and you should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

## Installation
Grab the following code and instal the npm package [Svelte.Typewriter](https://www.npmjs.com/package/svelte-typewriter). 

```
# yarn
yarn add -D svelte-typewriter

# npm
npm i -D svelte-typewriter
```

## Usage 

You need to import the Svelte component, and wrap your elements with the <Typewriter> component.

```
<script>
    import Typewriter from 'svelte-typewriter'
</script>

<Typewriter>
	<h1>Testing the typewriter effect</h1>
	<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
```

## Props

The <Typewriter> component can receive props that allows to manipulate the behavior of the resulting animation, these props are divided into 4 groups.

We'll be addressing the modes group which allow us to control the behavior of the typewriter effect by passing specific props to the `<Typewriter>` component.

Here's a quick summary: 

**1. Default Mode**

Apply animation simultaneously on all elements, as opposed to the sequential animation of cascade mode.

```
<Typewriter>
	<h1>Testing the typewriter effect</h1>
	<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
```

**2. Cascade Mode**

Apply's animation on all elements sequentially instead of simultaneously.

```
<Typewriter cascade>
	<h1>Testing the <code> cascade </code> mode</h1>
	<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
```

**3. Loop Mode**

Cycles the animation between the children elements of the parent Typewriter component, the interval (in milliseconds) between each word can be defined by passing a number as the parameter, otherwise defaults to 1500

```
<Typewriter loop>
	<h1>Testing the <code> loop </code> mode</h1>
	<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
```

**4. LoopRandom**

It's very similar to loop mode, but instead of cycling the animation in a linear way, it picks a random child element to animate each time, the interval (in milliseconds) between each word can be defined by passing a number as the parameter, otherwise defaults to 1500.

```
<Typewriter loopRandom>
	<h1>Testing the <code> loopRandom </code> mode</h1>
	<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
```

**5. scramble**

Randomize all letters in a element text for a specific amount of time, if a number is passed as argument, it's defined as the duration of the animation (defaults to 3000)

```
<Typewriter scramble>
	<h1>Testing the <code> scramble </code> mode</h1>
	<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
```

## Recap 

If you followed along then you should have completed the tutorial and learned how to make a typewriter transition that works for any frontend project. Keep enjoying Svelte. I know I do!

Now if you made it this far, then I am linking the code to my [completed Sandbox](https://dtyuy8.csb.app/) for you to fork or clone and then the job's done.

## Useful Resources

https://www.npmjs.com/package/svelte-typewriter
https://daisyui.com/
https://tailwindcss.com/