TikTok Followers Number Animation Using JavaScript

TikTok Followers Number Animation Using JavaScript

Animated numbers pull attention fast. Visitors notice movement before text. A follower counter adds life to a profile layout, landing page, or portfolio section. You control the speed, the final number, and the delay.

This guide shows how to build a smooth TikTok style followers counter using HTML, CSS, and JavaScript. The counter starts from zero, counts upward, then stops at the target value.

You learn how the animation works. You learn how to change the numbers. You learn how to reuse the code in other projects.

What You Will Build

You create a simple TikTok profile layout with:

  • Profile image
  • Username display
  • Following count
  • Animated followers count
  • Likes count
  •  Short bio section
Tutorial

The followers number starts at 0. After a short delay, the number increases step by step until the final total appears.

Why Use Number Animation on Your Website

Number animation improves user focus. Moving values guide the eye to important data.

Common use cases include:
  • Followers counters
  • Subscribers counters
  • Website statistics
  • Download totals
  • Sales numbers
  • Page view counters

Many dashboards and landing pages use this technique to present data in a clean and engaging way.

Project Structure

Create three files:

  • index.html
  • style.css
  • app.js

Keep all files in the same folder.

Step 1: HTML Structure

The HTML file builds the layout. The followers value sits inside a strong element with the id counter. JavaScript targets this element and updates the number during the animation.

Place the code below inside your HTML file.

<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>TikTok Follower counter</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<div class=”inner-container”>
<div class=”header”>
<div class=”pic”>
<img
src=”https://p16-sign-va.tiktokcdn.com/musically-maliva-obj/1663500951650309~c5_720x720.jpeg”
alt=””>
</div>
<div class=”username”>
<h2>Ostoncodecypher</h2>
<h1>Ostoncodecypher</h1>
</div>
</div>
<div class=”stat”>
<div class=”one”>
<p><strong>475</strong> Following</p>
</div>
<div class=”two”>
<p><strong id=”counter”>0</strong> Followers</p>
</div>
<div class=”three”>
<p><strong>20K</strong> Likes</p>
</div>
</div>
<div class=”bio”>
<h2>COMPSCI GRAD – YOUTUBER – WEB DEVELOPER. joined the platform to have fun.</h2>
</div>
</div>
</div>
<script src=”app.js”></script>
</body>
</html>
Step 2: Styling with CSS

The CSS file controls layout, spacing, and fonts. Flexbox aligns the profile image and username. The stat section displays the counts in a horizontal row.

This styling keeps the layout clean and readable on desktop and mobile screens.

Add the following code to your style.css file.

@import url(‘[https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap](https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap)’);
body{
padding:0;
margin:0;
font-family: ‘Roboto’, sans-serif;
}
.container{
display: grid;
margin-top:25px;
}
.inner-container{
margin: auto;
}
.pic{
width:116px;
height:116px;
}
img{
width:100%;
height: 100%;
display: block;
object-fit: cover;
cursor: pointer;
}
.header{
display: flex;
}
.username{
margin-left: 20px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.username h2{
margin-top:-2px;
font-weight: 700;
font-size: 32px;
line-height: 38px;
padding-bottom: 4px;
}
.username h1{
font-weight: 700;
font-size: 18px;
line-height: 25px;
text-overflow: ellipsis;
height: 25px;
overflow: hidden;
max-width: 450px;
white-space: nowrap;
margin-top:-25px;
}
.stat{
display: flex;
align-items: center;
margin-top: -5px;
color: rgba(18, 18, 18, 0.75);
}
.one, .two, .three{
margin:10px;
}
.bio h2{
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: rgb(18, 18, 18);
white-space: pre-line;
margin-top: -10px;
}
strong{
font-size: 18px;
line-height: 25px;
}
Step 3: JavaScript Counter Logic

The JavaScript file controls the animation. The script selects the counter element, sets the final number, then increases the value every few milliseconds.

The animation stops once the target number appears.

Add the code below to your app.js file.

const counterElem = document.querySelector(‘#counter’);
let subs = 4082 + 1;
let output = 0;
setTimeout(() => {
const counter = setInterval(() => {
if (output === subs) {
clearInterval(counter);
} else {
counterElem.innerHTML = `${output++}`;
}
}, 10);
}, 3000);

This counter works in modern browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

No external libraries required.

Conclusion

A simple number animation adds motion and focus to your interface. The code stays small. The setup stays easy. You reuse the same logic across many projects.

Copy the files. Adjust the numbers. Use the counter in dashboards, portfolios, and landing pages.

account_box Author:

date_range Date: 22nd, March 2026

access_time Time: 6:06 pm

remove_red_eye Views: 20 Views

Advertisement

share