Telegram Group Join Now
ADVERTISEMENT
Text Morph Animation Using HTML, CSS, and JavaScript
ADVERTISEMENT
ADVERTISEMENT
Welcome to the Codewithrandom blog. In this blog, We learn how to create Text Morph Animation. We use HTML, CSS, and JavaScript for this Text Morph Animation project.
I hope you enjoy our blog so let’s start with a basic html structure for this projects.
ADVERTISEMENT
Project Name | Text Morph Animation |
Code By | 3screativez |
written by | Code With Random/Anki |
Project Download | CodePen Link Given |
Language Used | HTML, CSS, and JavaScript |
External Link / Dependencies | No |
Responsive | No |
ADVERTISEMENT
HTML Code of Text Morph Animation
Create HTML file is named index.html then copy all the HTML code given below and paste all those code into your index.html file.
<div id="container"> <span id="text1"></span> <span id="text2"></span> </div> <svg id="filters"> <defs> <filter id="threshold"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140" /> </filter> </defs> </svg>
There is all the html code of the project, you can see output without CSS and JavaScript. then we write CSS for basic styling and Morph Animation Using JavaScript.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
HTML Code Output

There is no output just a blank screen as you see.
Let’s write CSS for Styling Text.
ADVERTISEMENT
CSS Code of Text Morph Animation
Create CSS file is named style.css then copy all the CSS code given below and paste all those code into your style.css file.
ADVERTISEMENT
@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap'); body { margin: 0px; } #container { position: absolute; margin: auto; width: 100vw; height: 80pt; top: 0; bottom: 0; filter: url(#threshold) blur(0.6px); } #text1, #text2 { position: absolute; width: 100%; display: inline-block; font-family: 'Raleway', sans-serif; font-size: 80pt; text-align: center; user-select: none; }
Output

Read also:
JavaScript Code of Text Morph Animation
After completing HTML and CSS part, create JavaScript file is named main.js then copy all the JavaScript code given below and paste all those code into your main.js file.
const elts = { text1: document.getElementById("text1"), text2: document.getElementById("text2") }; const texts = [ "CODEWITHRANDOM", "is", "so", "satisfying", "to", "watch?"]; const morphTime = 1; const cooldownTime = 0.25; let textIndex = texts.length - 1; let time = new Date(); let morph = 0; let cooldown = cooldownTime; elts.text1.textContent = texts[textIndex % texts.length]; elts.text2.textContent = texts[(textIndex + 1) % texts.length]; function doMorph() { morph -= cooldown; cooldown = 0; let fraction = morph / morphTime; if (fraction > 1) { cooldown = cooldownTime; fraction = 1; } setMorph(fraction); } function setMorph(fraction) { // fraction = Math.cos(fraction * Math.PI) / -2 + .5; elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`; elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`; fraction = 1 - fraction; elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`; elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`; elts.text1.textContent = texts[textIndex % texts.length]; elts.text2.textContent = texts[(textIndex + 1) % texts.length]; } function doCooldown() { morph = 0; elts.text2.style.filter = ""; elts.text2.style.opacity = "100%"; elts.text1.style.filter = ""; elts.text1.style.opacity = "0%"; } function animate() { requestAnimationFrame(animate); let newTime = new Date(); let shouldIncrementIndex = cooldown > 0; let dt = (newTime - time) / 1000; time = newTime; cooldown -= dt; if (cooldown <= 0) { if (shouldIncrementIndex) { textIndex++; } doMorph(); } else { doCooldown(); } } animate();
Final Output Of Text Morph Animation
Read also:
50+ HTML, CSS & JavaScript Projects With Source Code
Now we have completed our javascript section, Here is our updated output with html, css, and javascript. Hope you like this Animation. You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you.
ADVERTISEMENT
Credit Codepen User: @3screativez
ADVERTISEMENT
In this post, we learn how to create Text Morph Animation Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
ADVERTISEMENT
Written by – Code With Random/Anki
ADVERTISEMENT
How to create Text Morphing Animation using HTML, CSS, and JavaScript
In this blog, We learn how to create Text Morph Animation. We use HTML, CSS, and JavaScript for this Text Morph Animation project.
I hope you enjoy our blog so let’s start with a basic html structure for this projects.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Very good and so funny to see working.