webdevpuneet.com

Related Snippets

54 in Text Animations category
4–9 of 54

Redline Edit Replace

Marker Highlight Sweep

Circular Text Spin

Mouse-Tilt 3D Extruded Text

Blur Focus Pull

Slot Reel Letters

Redline Edit Replace — Strikethrough and Rewrite Animation

Redline Edit Replace · Text Animation · Plain HTML, CSS & JS · Live preview

CategoryText Animations
TagsText EffectsCSS Animation

Copy & paste

Source Code

<main class="desk">
  <div class="doc">
    <div class="doc-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="doc-name">proposal-v3.docx · Track changes on</span></div>
    <p class="body" id="body" aria-live="polite">
      We build <span class="edit"><span class="old">cheap</span><span class="ins"></span></span> websites for
      <span class="edit"><span class="old">everyone</span><span class="ins"></span></span> and ship them in
      <span class="edit"><span class="old">a few months</span><span class="ins"></span></span>, with
      <span class="edit"><span class="old">okay</span><span class="ins"></span></span> support after launch.
    </p>
    <div class="legend"><span><i class="k del"></i>Deleted</span><span><i class="k add"></i>Inserted</span><button type="button" class="replay" id="replay">Replay edits</button></div>
  </div>
</main>

Extend with AI

Take This Snippet Further With AI

Ask an AI coding assistant to explain why the collapsing of the old word uses max-width and opacity instead of display none, and how storing every setTimeout in an array lets the replay button cancel a half-finished sequence safely. It's worth asking how you'd restructure the schedule using promises or async/await.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a "tracked changes" text animation in plain HTML, CSS and JavaScript where words in a sentence get struck through and rewritten one edit at a time.

Requirements:
- A document card with a toolbar-style header and a paragraph containing four edit groups. Each group has an .old word and an empty .ins span.
- Phase 1: add a struck class that grows a red line across the old word (a ::after pseudo-element animating width) and turns it red.
- Phase 2: add a typing class that opens the .ins span with a max-width transition while JavaScript types the replacement text one letter at a time; the inserted text is green with an underline.
- Phase 3: add an accepted class that collapses the old word (max-width to 0 and opacity to 0) and returns the new text to the normal colour with no underline, so the sentence reflows smoothly.
- Schedule all steps through a helper that stores every timeout, so a "Replay edits" button can clear them and restart without overlap.
- Make the paragraph an aria-live polite region, and under prefers-reduced-motion show the final accepted sentence immediately with no transitions.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

What's included

Features

Three-phase edit
Strike, type, accept: each change is told in three clear steps, matching how people read tracked changes.
Animated strike line
A ::after rule grows across the old word, so the cut is drawn rather than switched on.
Smooth reflow
Words appear and disappear through max-width transitions, so the sentence closes up gracefully.
Typed replacements
The new word is typed letter by letter, with a green underline that clears on accept.
Cancellable timeline
One timer helper means Replay clears every pending step first, so runs never overlap.
Final state for everyone
Reduced-motion users see the accepted sentence at once, and the paragraph is a polite live region.

About this UI Snippet

Redline Edit Replace — Strike, Type, Accept: A Tracked-Changes Text Animation

Screenshot of the Redline Edit Replace snippet rendered live

Everyone recognises the visual language of an edit: red strikethrough on the word that goes, green on the word that replaces it. This snippet animates that whole workflow as a sentence rewrites itself, four edits in sequence. It's useful because it tells a story with text alone: "this is how we're making your words better".

Three phases per edit

Each edit is a small group: an .old word and an empty .ins placeholder. In the first phase the group gets struck, which grows a red line from 0 to full width through a ::after pseudo-element and turns the word red. In the second phase typing opens the .ins container (a max-width transition from 0) while JavaScript types the replacement one letter at a time. In the third, accepted collapses the old word to zero width and fades it, and the new word loses its green underline and returns to normal text colour, as if you'd accepted the change.

Why max-width, not display

display:none can't be transitioned. Animating max-width from 0 to a generous 14em (and from the word's width back to 0 for the old word) lets the sentence reflow smoothly as words appear and disappear, with the text after the edit sliding into place rather than jumping.

A cancellable timeline

All the steps are scheduled through one later() helper that stores each timer, so "Replay edits" can clear everything mid-sequence and start fresh with no overlapping animations. The paragraph is an aria-live region so assistive tech hears the finished sentence, and reduced-motion visitors see the final, accepted version immediately.

Step by step

How to Use

  1. 1
    Paste the three blocksA white document window appears and four words in the sentence are struck through and rewritten in turn, ending with the clean final sentence.
  2. 2
    Write your own sentenceEdit the paragraph and wrap each word you want to change in <span class="edit"><span class="old">…</span><span class="ins"></span></span>.
  3. 3
    Set the replacementsUpdate NEW_TEXT in the JavaScript so there is one replacement string for each edit, in order.
  4. 4
    Tune the timingTyping speed is the 45 (ms per letter). The 650 before typing and the 1500 after each edit set the pause. Raise them for a calmer read.
  5. 5
    Re-colour the marksRed is #e11d48 and green is #16a34a. Change them (and the legend swatches) to match your brand or a darker background.

Real-world uses

Common Use Cases

Copywriting and editing services
Show a before-and-after rewrite of a client sentence as a live demo on a freelance copywriter's site.
Grammar and AI writing tools
Illustrate suggestions being accepted in a landing page hero for a writing assistant.
Legal and document-review products
Demonstrate tracked changes and approvals without screenshots.
Rebrand and "we changed" announcements
Strike the old claim and type the new one in a changelog or about page.
Teaching writing
Show students how a vague sentence turns specific, one edit at a time.

Got questions?

Frequently Asked Questions

Add another .edit group in the paragraph and one more string at the end of NEW_TEXT. The script reads every .edit in order and the timing accumulates, so no other change is needed.

The old word needs a measurable width to animate from. It must be display:inline-block with an explicit max-width transition. If you changed it to inline, the collapse becomes instant.

Yes. Remove the direct run() call and trigger it from an IntersectionObserver, as other scroll-triggered snippets here do.

Yes: leave out the accepted step, or make it only turn the old word grey. That produces a permanent "before and after" view.