Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create animations using JavaScript?
JavaScript animations are created by repeatedly changing CSS properties over time using functions like setInterval() or requestAnimationFrame(). This allows you to create smooth visual effects directly in the browser.
Basic Animation Principles
JavaScript animations work by:
- Selecting the element to animate
- Using a timer function to repeatedly update CSS properties
- Incrementing position, size, or other properties each frame
- Stopping the animation when the target is reached
Example: Moving and Morphing Animation
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
button {
padding: 10px 20px;
font-size: 18px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px 5px;
}
button:hover {
background-color: #0056b3;
}
.animation-box {
width: 60px;
height: 60px;
position: absolute;
background-color: #8619cf;
top: 150px;
left: 50px;
transition: none;
}
</style>
</head>
<body>
<h1>JavaScript Animation Example</h1>
<button onclick="startAnimation()">Start Animation</button>
<button onclick="resetAnimation()">Reset</button>
<div class="animation-box"></div>
<script>
function startAnimation() {
const elem = document.querySelector(".animation-box");
let pos = 0;
const id = setInterval(frame, 10);
function frame() {
if (pos >= 400) {
clearInterval(id);
} else {
pos += 2;
elem.style.left = (50 + pos) + 'px';
elem.style.borderRadius = (pos / 8) + 'px';
elem.style.transform = `rotate(${pos}deg)`;
}
}
}
function resetAnimation() {
const elem = document.querySelector(".animation-box");
elem.style.left = '50px';
elem.style.borderRadius = '0px';
elem.style.transform = 'rotate(0deg)';
}
</script>
</body>
</html>
How It Works
The animation function uses several key concepts:
- setInterval(): Calls the frame function every 10 milliseconds
-
Position tracking: The
posvariable tracks animation progress -
CSS manipulation: Updates
left,borderRadius, andtransformproperties -
Cleanup:
clearInterval()stops the animation when complete
Alternative: Using requestAnimationFrame()
For smoother animations, use requestAnimationFrame() instead of setInterval():
function smoothAnimation() {
const elem = document.querySelector(".animation-box");
let start = null;
function animate(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const pos = Math.min(progress / 10, 400);
elem.style.left = (50 + pos) + 'px';
elem.style.borderRadius = (pos / 8) + 'px';
if (pos < 400) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
Key Animation Properties
| Property | Effect | Example |
|---|---|---|
left/top |
Movement | elem.style.left = pos + 'px' |
width/height |
Scaling | elem.style.width = size + 'px' |
opacity |
Fade effect | elem.style.opacity = fade |
transform |
Rotation, scale | elem.style.transform = 'rotate(' + deg + 'deg)' |
Performance Tips
- Use
requestAnimationFrame()for better performance and smoother animations - Avoid animating too many elements simultaneously
- Use CSS transforms instead of changing layout properties when possible
- Always clear intervals to prevent memory leaks
Conclusion
JavaScript animations provide precise control over visual effects by manipulating CSS properties over time. Use setInterval() for simple animations or requestAnimationFrame() for smoother, performance-optimized results.
Updated on: 2026-03-15T23:18:59+05:30
348 Views
Advertisements