Text animations are one of the easiest ways to add visual interest to your Showit website without overwhelming your design. In this tutorial, you’ll learn several different ways to animate text using Showit’s built-in features and a few simple copy-and-paste code options.

No coding experience is required — any code used can be copied directly and lightly customized.

This effect cycles through highlighted lines of text, creating a subtle flashing emphasis.

---

Flashing Highlighted Text Effect

How to Set It Up

1. Start with a blank canvas.
2. Add either:
   • A solid background, or
   • A background image (optional: lower opacity so text is easier to read).
3. Add your text and place each line on its own text box.

⚠️ Important: Showit doesn’t allow individual word color changes inside a single text box.
If you want to highlight one word in a sentence, place that word in its own text element.

Create Canvas Views

1. Format both desktop and mobile layouts first.
2. Change the first line of text to your highlight color.
3. Click the three dots → Canvas Views → Add Canvas View.
4. Drag all text elements into the first canvas view.
5. Duplicate the canvas view.
6. In each duplicate:
   • Reset all text to the base color
   • Change one line to the highlight color
7. Repeat until each line has its own highlighted view.

Animate the Text

1. Open View Transitions.
2. Enable Auto Advance View.
3. Adjust timing (½ second to 1 second works well).
4. Preview and fine-tune the speed.

Optional: Background Animation

• Canvas background images apply to all views.
• To change backgrounds per view:
  • Add an image element inside the canvas
  • Stretch it full-width
  • Send it to the back
  • Adjust opacity per view

---

Flashing Text Box Effect

This animation flashes a colored shape behind a word or phrase.

Steps

1. Add a new canvas.
2. Add your text and align it (left, center, etc.).
3. Add a shape element (rectangle, circle, or custom).
4. Style the shape:
   • Color
   • Optional border
   • Slight rotation for a “sticker” effect
5. Place the shape behind the highlighted word.

Animate Using Canvas Views

1. Create a canvas view.
2. Drag all elements into it.
3. Duplicate the view.
4. Change the shape color in each version.
5. Enable Auto Advance View and adjust speed.

---

Sliding Reveal Text Animation

This subtle animation makes text slide into view and instantly elevates the design.

Setup

1. Add a blank canvas.
2. Lock background elements horizontally.
3. Optional: Lower background image opacity.
4. Add large headline text.

Add Animations

1. Select the first text line.
2. Click Animation → Slide.
3. Set:
   • Duration: ~1 second
   • Direction: left or right
4. For the second line:
   • Add a small delay (0.25 seconds)
   • Slide from the opposite direction

This creates a polished, staggered reveal.

Vertical Text Option

• Rotate text (270° works well).
• Animate one line from the top and the other from the bottom.
• Adjust canvas stacking order so text appears to slide from behind another canvas rather than over it.

---

Rotating Quotes or Text

Perfect for testimonials, slogans, or rotating statements.

Steps

1. Add a blank canvas with a solid background.
2. Add your text.
3. Create canvas views.
4. Duplicate views and replace the text in each.
5. Enable Auto Advance View.
6. Adjust speed to your liking.

---

Typewriter Text Effect (Using Code)

This effect types and deletes text automatically.

How to Add It

1. Add a new canvas.
2. Click Add Element → Embed Code.
3. Paste the provided typewriter code into the embed box.

Customization Options

You can easily update:

• Font family (must already exist in Showit)
• Font size
• Font weight
• Text color
• Line height

Editing the Text

• Each line must:
  • Be inside quotation marks
  • End with a comma if there are multiple lines
• Stretch the embed box wide enough so text doesn’t cut off.

Mobile & Tablet Sizes

Be sure to adjust:

• Font size for mobile
• Font size for tablet
  Large desktop fonts will not translate well automatically.

---

Flashing Neon Text Effect (CSS)

This creates a glowing neon flicker effect.

Assign a Class Selector

1. Select your text.
2. Go to Advanced → Class Selector.
3. Name it something simple (example: neon-text).

Add Custom CSS

1. Click the page name at the top.
2. Open Advanced Settings.
3. Paste the provided CSS.
4. Make sure the class selector name matches exactly (including the .).

Customize Colors & Speed

• Replace hex codes to change neon colors.
• Keep animation speed around 1–1.5 seconds for best results.
• Save and preview (this effect won’t show inside the editor preview).

---

Final Thoughts

Text animations can instantly make your Showit website feel:

• More dynamic
• More intentional
• More high-end

You don’t need to use all of these — even one subtle animation can dramatically improve your design when used thoughtfully.