ADVERTISEMENT

Text Morph Animation Using HTML, CSS, and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Text Morph Animation Using HTML, CSS, and JavaScript

Text Morph Animation Using HTML, CSS, and JavaScript
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 NameText Morph Animation
Code By3screativez
written byCode With Random/Anki
Project DownloadCodePen Link Given
Language UsedHTML, CSS, and JavaScript
External Link / DependenciesNo
ResponsiveNo
Text Morph Animation project information

 

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
Text Morph Animation Using HTML and CSS

 

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
Text Morph Animation Using HTML and CSS
There is no output just a blank screen because we write our words using javascript so let’s write javascript for letter text and animation.
 
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

Text Morph Animation Using HTML, CSS and JavaScript
Text Morph Animation Using HTML, CSS and JavaScript
Text Morph Animation Using HTML, CSS and JavaScript
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

Telegram Group Join Now

Share on:

0 thoughts on “Text Morph Animation Using HTML, CSS, and JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT