Setting Up The Typewriter Effect Without CSS

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 or use one of their boilerplates available on Github.

# 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.

# 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 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 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 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/