Animated Butterfly | JavaScript Examples

Introduction to Animation

JavaScript animations bring websites to life by creating movement and visual interest. Using the setInterval() method, we can create smooth animations by updating elements at regular intervals.

The animated butterfly example demonstrates how to simulate wing flapping by cycling through a series of images at a rapid pace. This technique can be applied to create various animation effects on your website.

Key Animation Concepts:

setInterval() executes a function repeatedly at specified intervals
clearInterval() stops the animation loop
Image cycling creates the illusion of movement
CSS transitions can enhance the animation effect
Performance considerations for smooth animations

Example 1: Animated Butterfly

This example creates a butterfly that flaps its wings using the setInterval() method. We cycle through 8 different butterfly images to create the animation effect.

// Animated Butterfly Implementation
let currentImage = 1;
let animationInterval;

function startAnimation() {
  // Clear any existing interval
  if (animationInterval) clearInterval(animationInterval);
  
  // Start new animation interval
  animationInterval = setInterval(() => {
    // Update the butterfly image
    document.getElementById('butterfly').src = `bfly${currentImage}.gif`;
    
    // Move to next image (1-8)
    currentImage = currentImage < 8 ? currentImage + 1 : 1;
  }, 100); // Update every 100ms
}

function stopAnimation() {
  clearInterval(animationInterval);
}

Butterfly Animation Live Demo

Example 2: Image Slideshow

A simple image slideshow that cycles through a collection of nature photos. This demonstrates how to create smooth transitions between images using JavaScript.

// Image Slideshow Implementation
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;

function startSlideshow() {
  // Hide all slides
  slides.forEach(slide => slide.classList.remove('active'));
  
  // Show current slide
  slides[currentSlide].classList.add('active');
  
  // Move to next slide
  currentSlide = (currentSlide + 1) % totalSlides;
  
  // Continue slideshow
  slideshowInterval = setTimeout(startSlideshow, 3000);
}

function stopSlideshow() {
  clearTimeout(slideshowInterval);
}

Image Slideshow Live Demo

Example 3: Countdown Timer

A countdown timer that demonstrates how to update the DOM at regular intervals. This timer counts down from 1 minute and can be paused or reset.

// Countdown Timer Implementation
let timeLeft = 60; // 1 minute
let timerInterval;

function startTimer() {
  // Clear any existing interval
  if (timerInterval) clearInterval(timerInterval);
  
  // Start new timer interval
  timerInterval = setInterval(() => {
    timeLeft--;
    
    // Update display
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    document.getElementById('timer').textContent = 
      `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    
    // Stop timer when time is up
    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      document.getElementById('timer').textContent = "Time's up!";
    }
  }, 1000); // Update every second
}

function stopTimer() {
  clearInterval(timerInterval);
}

function resetTimer() {
  clearInterval(timerInterval);
  timeLeft = 60;
  document.getElementById('timer').textContent = "01:00";
}

Countdown Timer Live Demo

01:00

More Animation Examples

Explore more JavaScript animation examples to enhance your learning experience:

Digital Dice

Interactive dice with animation effects

View Example

Canvas Animations

Create animations using HTML5 Canvas

View Example

Video Player

Custom video player with JavaScript controls

View Example

Game Development

Simple game mechanics using JavaScript

View Example