Add typewriter animation

Tools:

Video

1. Add a text block and assign a class to it

2. Add this script at the level</body> in your page settings

  1. Remember to put your class in the “typing_text” script
  2. Replace the text “your text” with the content you want to show
 < script src=" https://cdn.jsdelivr.net/npm/typed.js@2.0.11 ">
</script>
 < script>
    	var typed4 = new Typed('.typing_text', {
        strings: ["your text","your text","your text","your text"],
        typeSpeed: 80,
        backSpeed: 40,
        smartBackspace: true,
        loop: true
      });
</script>

3. Publish your site and test the result

Author photo
Sacha D.
Updated on
30/5/2024
Product Designer, the duo's creative head. He leads projects from start to finish, ensures the creative direction of Gemeos and ensures that all projects achieve the desired results.
Are you stuck with your current site?
Let's talk ?
Welcome
>
Gemeos Academy
>
Add typewriter animation
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time