Text Morph Component

A web component for smooth text morphing animations using SVG paths and GSAP

Type to see it morph
Final text after morph 
<!-- Include required libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script>
<script src="text-morph.js"></script>

<!-- Use the component -->
<text-morph 
    start-text="HELLO" 
    end-text="WORLD" 
    font-size="120" 
    duration="1.5" 
    loop
    color="#000">
</text-morph>
// Create programmatically
const morph = document.createElement('text-morph');
morph.setAttribute('start-text', 'HELLO');
morph.setAttribute('end-text', 'WORLD');
morph.setAttribute('font-size', '120');
morph.setAttribute('duration', '1.5');
morph.setAttribute('loop', '');
morph.setAttribute('color', '#000');
document.body.appendChild(morph);

// Update dynamically
morph.setAttribute('start-text', 'GOODBYE');
morph.setAttribute('end-text', 'FRIEND');
Attribute Type Default Description
start-text string "HELLO" Initial text to display
end-text string "WORLD" Text to morph into
font-size number 120 Font size in pixels
duration number 1.5 Animation duration in seconds
loop boolean false Whether to loop the animation
color string "#000" Text color (any CSS color)