Text Animation Using CSS and JavaScript

This code creates a text animation using CSS and JavaScript. It animates individual letters when clicked. The animation involves rotations, scaling, and translations. It helps add interactive visual effects to text elements.

You can use this code on your website’s headings or titles to make them more engaging. It adds visual appeal and interactivity, enhancing user experience. This can help grab visitors’ attention and make your website stand out.

How to Create Text Animation Using CSS and JavaScript

1. First, include the Font Awesome CDN link and import the necessary fonts in your HTML file.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'>

2. Create the HTML structure for your text animation. Replace the letters inside the <span> elements with your desired text.

<h3>Click the letters!</h3>
<div class="word">
	<span>M</span>
	<span>A</span>
	<span>N</span>
	<span>G</span>
	<span>U</span>
</div>

3. Style your text animation using CSS. You can customize fonts, animation durations, and colors according to your preferences.

@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');

.word {
	font-family: 'Anton', sans-serif;
	perspective: 1000px; 
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 100px;
	user-select: none;
	line-height: .8;
}

.word span:nth-child(1).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%, 100% {
		transform: rotate(0deg);
	}
	
	30%, 60% {
		transform: rotate(-45deg);
	}
}

.word span:nth-child(2).active {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%, 35% {
		transform: scale(2, .2) translate(0, 0);
	}
	
	45%, 50% {
		transform: scale(1) translate(0, -150px);
	}
	
	80% {
		transform: scale(1) translate(0, 0);
	}
}

.word span:nth-child(3).active {
	animation: falling 2s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}
	
	24% {
		transform: rotateX(150deg);
	}
	
	36% {
		transform: rotateX(200deg);
	}
	
	48% {
		transform: rotateX(175deg);
	}
	
	60%, 85% {
		transform: rotateX(180deg);
	}
	
	100% {
		transform: rotateX(0deg);
	}
}

.word span:nth-child(4).active {
	animation: rotate 1s ease-out;
}

@keyframes rotate {
	20%, 80% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(360deg);
	}
}

.word span:nth-child(5).active {
	animation: toplong 1.5s linear;
}

@keyframes toplong {
	10%, 40% {
		transform: translateY(-48vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-48vh) scaleY(4);
	}
}

/* Other styles */
body {
	background: linear-gradient(to right, #da4453, #89216b) !important; 
	color: #fff;
	display: flex;
	font-family: 'Roboto', sans-serif;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	height: 100vh;
	margin: 0;
}

.fixed {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	letter-spacing: 1px;
}

footer i {
	color: red;
}

footer a {
	color: #3C97BF;
	text-decoration: none;
}

4. Finally, add JavaScript to make the text interactive. This code triggers the animation when a letter is clicked.

const spans = document.querySelectorAll('.word span');

spans.forEach((span, idx) => {
	span.addEventListener('click', (e) => {
		e.target.classList.add('active');
	});
	span.addEventListener('animationend', (e) => {
		e.target.classList.remove('active');
	});
	
	// Initial animation
	setTimeout(() => {
		span.classList.add('active');
	}, 750 * (idx+1))
});

Ensure all files are properly linked in your HTML document and test your text animation in a web browser. Adjust animations or styles as needed to achieve the desired effect.

That’s all! hopefully, you have successfully created Text Animation Using CSS and Javascript. If you have any questions or suggestions, feel free to comment below.