If you’re looking to add a dynamic touch to your Showit website, incorporating an animated typewriter text effect can be a game-changer. This engaging feature captures visitors’ attention and adds a modern flair to your site’s design. In this guide, we’ll walk you through the process of adding an animated typewriter text in Showit, ensuring your website stands out.

Why Use Animated Typewriter Text in Showit?

Animated typewriter text is more than just a visual gimmick; it’s a powerful tool to convey key messages dynamically. Whether you’re highlighting your services, showcasing testimonials, or emphasizing calls to action, this effect can enhance user engagement and retention.

Step-by-Step Guide to Adding Animated Typewriter Text in Showit

1. Prepare Your Showit Canvas

• Select the Canvas: Navigate to the specific page and canvas where you want the animated text to appear.
• Add an Embed Code Box: Click on the “+” icon, choose “Embed Code,” and place it within your selected canvas.

2. Insert the Typewriter Effect Code

You’ll need to use a JavaScript library like Typed.js to achieve the typewriter effect. Here’s a basic example:

<div class=”typewriter-container”>

  <span id=”typewriter-text”></span>

  <span class=”cursor”>|</span>

</div>

<style>

.typewriter-container {

  display: inline-block;

  font-family: ‘Courier New’, monospace;

  font-size: 40px;

  min-height: 30px; /* Prevents layout shift */

}

.cursor {

  font-weight: bold;

  animation: blink 1s infinite;

}

@keyframes blink {

  0%, 100% { opacity: 1; }

  50% { opacity: 0; }

}

</style>

<script>

// Add your text sections here

const textSections = [

    “Welcome to our website! ✨”,

    “We create amazing designs… 🎨”,

    “Let’s bring your vision to life! 💫”

];

const typingSpeed = 100; // Speed for typing

const erasingSpeed = 50;  // Speed for erasing (faster than typing)

const delayAfterTyping = 2000;  // Pause after typing

const delayAfterErasing = 1000; // Pause after erasing

let currentSection = 0;

let isTyping = true;

let currentText = “”;

let charIndex = 0;

function updateText() {

    document.getElementById(“typewriter-text”).innerHTML = currentText;

}

function animate() {

    if (isTyping) {

        if (charIndex < textSections[currentSection].length) {

            // Typing effect

            currentText += textSections[currentSection].charAt(charIndex);

            charIndex++;

            updateText();

            setTimeout(animate, typingSpeed);

        } else {

            // Finished typing

            setTimeout(() => {

                isTyping = false;

                animate();

            }, delayAfterTyping);

        }

    } else {

        if (currentText.length > 0) {

            // Erasing effect

            currentText = currentText.slice(0, -1);

            updateText();

            setTimeout(animate, erasingSpeed);

        } else {

            // Finished erasing

            isTyping = true;

            charIndex = 0;

            currentSection = (currentSection + 1) % textSections.length;

            setTimeout(animate, delayAfterErasing);

        }

    }

}

// Start the animation when the page loads

window.onload = animate;

</script>

• Customize the Strings: Replace the text within the strings array with your desired messages.
  
• Adjust Speeds: Modify typeSpeed and backSpeed to control typing and deleting speeds.

3. Style the Text

You can add CSS to style the text to match your website’s design:

<style>

  #typed-output {

    font-family: ‘YourFontName’, sans-serif;

    font-size: 24px;

    color: #333;

    text-align: center;

  }

</style>

• Font Family: Ensure the font you choose is uploaded to your Showit media library.
  
• Responsive Design: Use media queries to adjust font sizes for different screen sizes.
  

4. Preview and Publish

• Preview: Use Showit’s preview function to see the animation in action.
  
• Adjust as Needed: Tweak the code and styles until you’re satisfied with the appearance and behavior.
  
• Publish: Once everything looks good, publish your site to make the changes live.

Tips and Best Practices

• Limit the Number of Strings: Too many messages can overwhelm visitors. Stick to 3-5 key phrases.
  
• Keep It Short and Sweet: Concise messages are more impactful and easier to read.
  
• Test on Multiple Devices: Ensure the animation looks good on desktops, tablets, and smartphones.
• Avoid Overuse: Use the typewriter effect sparingly to maintain its impact.
  

Common Issues and Troubleshooting

• Animation Not Appearing: Ensure the Typed.js script is correctly linked and that there are no typos in your code.
  
• Styling Issues: Double-check your CSS for any conflicting styles that might affect the animation’s appearance.
  
• Performance Concerns: Excessive animations can slow down your site. Use them judiciously.
  

Conclusion

Adding an animated typewriter text effect in Showit is a straightforward process that can significantly enhance your website’s visual appeal and user engagement. By following the steps outlined above, you can implement this feature seamlessly and customize it to fit your brand’s aesthetic.

For more tips and tutorials on optimizing your Showit website, visit Get Perfect Website.