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
How to create Frame by Frame Animation using CSS and JavaScript?
Frame by frame animation is a technique used in animation to produce motion by displaying a series of static images which are sequentially displayed. The appearance of motion is achieved by displaying the images in rapid succession.
The followings are needed before we go to create the frame by frame animation:
A series of images (frames)
A web page with CSS and JavaScript
Approach
The process of creating frame by frame animation using CSS and JavaScript is relatively simple:
STEP 1 - First, you need to create a series of images (frames) that you want to be displayed in succession.
STEP 2 - Next, you need to create a web page with CSS and JavaScript that will load and display the images in rapid succession.
Complete Working Example
Here is a complete working example of how to create frame by frame animation using CSS and JavaScript. The code will load and display 2 images in succession:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frame by Frame Animation</title>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
border: 2px solid #ddd;
margin: 20px auto;
}
#container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: none;
}
#container img:first-child {
display: block;
}
.controls {
text-align: center;
margin: 20px;
}
button {
padding: 10px 20px;
margin: 5px;
background: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div id="container">
<img src="/images/frame1.png" alt="Frame 1" />
<img src="/images/frame2.png" alt="Frame 2" />
</div>
<div class="controls">
<button onclick="startAnimation()">Start</button>
<button onclick="stopAnimation()">Stop</button>
<button onclick="nextFrame()">Next Frame</button>
</div>
<script>
var container = document.getElementById('container');
var images = container.getElementsByTagName('img');
var currentImage = 0;
var animationInterval = null;
function changeImage() {
// Hide current image
images[currentImage].style.display = 'none';
// Move to next image (loop back to start if needed)
currentImage = (currentImage + 1) % images.length;
// Show next image
images[currentImage].style.display = 'block';
}
function startAnimation() {
if (!animationInterval) {
animationInterval = setInterval(changeImage, 500);
}
}
function stopAnimation() {
if (animationInterval) {
clearInterval(animationInterval);
animationInterval = null;
}
}
function nextFrame() {
stopAnimation();
changeImage();
}
// Auto-start animation
startAnimation();
</script>
</body>
</html>
HTML Structure
The HTML structure consists of:
- Container div - Holds all animation frames
- Image elements - Each represents one frame of the animation
- Control buttons - For starting, stopping, and manually stepping through frames
CSS Styling
The CSS handles the visual presentation:
- Container positioning - Creates a fixed-size viewport for the animation
-
Image stacking - Uses
position: absoluteto overlay all frames in the same position -
Visibility control - Only shows the first frame initially, hiding others with
display: none
JavaScript Animation Logic
The JavaScript code manages the frame transitions:
-
Frame tracking -
currentImagevariable keeps track of the active frame -
Frame switching -
changeImage()function hides the current frame and shows the next one -
Animation timing -
setInterval()controls the playback speed (500ms between frames) - Loop handling - Modulo operator ensures the animation loops back to the first frame
Key Features
| Feature | Implementation | Purpose |
|---|---|---|
| Auto-loop | Modulo operator (%) | Seamless animation cycling |
| Manual control | Start/Stop buttons | User interaction |
| Frame stepping | Next Frame button | Debug and preview individual frames |
Customization Options
You can easily customize this animation by:
- Speed adjustment - Change the interval value (500ms) for faster/slower playback
- Frame count - Add more image elements for longer animations
- Size modification - Adjust container dimensions for different aspect ratios
Conclusion
Frame by frame animation with CSS and JavaScript provides precise control over each frame's timing and display. This technique is perfect for creating sprite animations, loading indicators, or any sequence-based visual effects in web applications.
969 Views
