CodewithLord

🧠 Description

Create a smooth and modern text flipping animation that dynamically changes words with a subtle blur and vertical slide effect. This project uses HTML, CSS, and vanilla JavaScript to rotate multiple phrases seamlessly — perfect for hero sections, landing pages, and portfolios. The elegant animation enhances user engagement by displaying changing text like “Landing Pages,” “Component Blocks,” and more in a visually appealing manner.

💻 HTML Code

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>CodewithLord - Text Flip Effect</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <div class="layout-text-flip">
11    <span class="static-text">Build Amazing</span>
12    <span class="rotating-text-container">
13      <span class="rotating-text">Landing Pages</span>
14    </span>
15  </div>
16
17  <script src="script.js"></script>
18</body>
19</html>
20

The HTML provides the structure of the animation. It contains:

A main div with the class layout-text-flip, which holds two text parts:

A static text — “Build Amazing”

A rotating text container that wraps around the changing text — “Landing Pages”

The script tag at the end links to the JavaScript file that controls the animation.

The link tag connects the CSS file for styling. In short, HTML sets up the skeleton for displaying the static and animated parts of the text.

CSS Code

1body {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  height: 100vh;
6  background: #111;
7  font-family: sans-serif;
8}
9
10.layout-text-flip {
11  display: flex;
12  gap: 0.5rem;
13  font-size: 2rem;
14  font-weight: bold;
15  color: #fff;
16}
17
18.static-text {
19  drop-shadow: 0 2px 4px rgba(0,0,0,0.5);
20}
21
22.rotating-text-container {
23  position: relative;
24  overflow: hidden;
25  display: inline-block;
26  height: 2.5rem; /* adjust for font-size */
27}
28
29.rotating-text {
30  display: inline-block;
31  transform: translateY(0);
32  filter: blur(0px);
33  transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
34  white-space: nowrap;
35  color: #000;
36  background: #fff;
37  padding: 0 0.5rem;
38  border-radius: 0.25rem;
39}
40
41

The CSS defines the look and animation style of the text:

The body uses flexbox to center the content vertically and horizontally, with a dark background for contrast.

The .layout-text-flip class arranges the static and rotating text side by side with bold, white text styling.

The .rotating-text-container hides overflowing text and defines the area where the animation occurs.

The .rotating-text uses transition effects like translate, blur, and opacity to create a smooth sliding and fading motion when the text changes. Overall, CSS gives the animation a clean, modern, and glowing effect.

Javascipt Code

1const words = ["Landing Pages", "Component Blocks", "Page Sections", "3D Shaders"];
2const duration = 3000; // 3 seconds per word
3let currentIndex = 0;
4
5const rotatingText = document.querySelector(".rotating-text");
6
7function showNextWord() {
8  // Animate current word up & blur
9  rotatingText.style.transform = "translateY(-40px)";
10  rotatingText.style.filter = "blur(10px)";
11  rotatingText.style.opacity = "0";
12
13  setTimeout(() => {
14    // Change text
15    currentIndex = (currentIndex + 1) % words.length;
16    rotatingText.textContent = words[currentIndex];
17
18    // Reset position below
19    rotatingText.style.transform = "translateY(50px)";
20    rotatingText.style.filter = "blur(10px)";
21    rotatingText.style.opacity = "0";
22
23    // Animate into view
24    setTimeout(() => {
25      rotatingText.style.transform = "translateY(0)";
26      rotatingText.style.filter = "blur(0px)";
27      rotatingText.style.opacity = "1";
28    }, 50);
29  }, 500); // match transition duration
30}
31
32// Start interval
33setInterval(showNextWord, duration);
34
35

The JavaScript adds interactivity and animation control:

It stores multiple words (Landing Pages, Component Blocks, etc.) in an array.

It uses setInterval() to automatically switch the displayed word every 3 seconds.

When changing words, it applies transitions such as upward movement, blur, and fade-out — then updates the text and brings it back smoothly into view. Essentially, JavaScript controls the timing and logic behind the text transitions, making the effect dynamic and continuous.

Dynamic Text Flip Animation | Modern Typing & Blur Transition Effect using HTML, CSS & JavaScript

🧠 Description

💻 HTML Code

CSS Code

Javascipt Code

Love this component?