Setting Up The Typewriter Effect Without CSS

Helitha Rupasinghe - Jun 1 '22 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

...then start Rollup.

npm run dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .