Animate Elements

Learning Objectives

• Understand animation techniques
• Master JavaScript animations
• Learn CSS animations
• Control animation timing
• Create smooth user experiences

Section 19.1: Repeat an Action at Regular Intervals

setInterval

let counter = 0;

let interval = setInterval(function() {
    counter++;
    console.log(counter);
}, 1000);  // Every 1000ms (1 second)

// Clear interval
clearInterval(interval);

setTimeout

console.log("Starting");

setTimeout(function() {
    console.log("Delayed 2 seconds");
}, 2000);

console.log("Continued");

requestAnimationFrame

function animate() {
    // Do animation
    element.style.left = Date.now() + "px";
    
    // Request next frame
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

Section 19.2: Animate Page Elements

Moving Elements

<div id="box" style="position: relative; left: 0;"></div>

<script>
let box = document.getElementById("box");
let position = 0;

let interval = setInterval(function() {
    position += 5;
    box.style.left = position + "px";
    
    if (position >= 300) {
        clearInterval(interval);
    }
}, 30);
</script>

Fading In/Out

let element = document.querySelector(".fade");
let opacity = 1;

let interval = setInterval(function() {
    opacity -= 0.05;
    element.style.opacity = opacity;
    
    if (opacity <= 0) {
        clearInterval(interval);
    }
}, 30);

Color Transition

let element = document.querySelector(".color-box");
let colors = ["red", "green", "blue", "yellow"];
let index = 0;

setInterval(function() {
    element.style.backgroundColor = colors[index];
    index = (index + 1) % colors.length;
}, 1000);

Section 19.3: Start/Stop an Animation

Animation Control

let animationId = null;
let isAnimating = false;

function startAnimation() {
    if (isAnimating) return;
    isAnimating = true;
    
    animate();
}

function animate() {
    // Update animation
    element.style.left = (element.offsetLeft + 5) + "px";
    
    if (element.offsetLeft < 300) {
        animationId = requestAnimationFrame(animate);
    } else {
        isAnimating = false;
    }
}

function stopAnimation() {
    if (animationId) {
        cancelAnimationFrame(animationId);
    }
    isAnimating = false;
}

document.getElementById("start").addEventListener("click", startAnimation);
document.getElementById("stop").addEventListener("click", stopAnimation);

Section 19.4: Alternative: CSS Animations

CSS Keyframes

@keyframes slide {
    from {
        left: 0;
    }
    to {
        left: 300px;
    }
}

.sliding {
    animation: slide 2s ease-in-out forwards;
}

JavaScript Trigger

let element = document.querySelector(".box");

document.getElementById("animate").addEventListener("click", function() {
    element.classList.add("sliding");
});

CSS Transitions

.box {
    transition: left 2s ease-in-out;
}

element.style.left = "300px";  // Smooth transition

Section 19.5: Choosing the Right Animation Technique

When to Use JavaScript

• Complex animations
• Interactive control needed
• Multiple simultaneous animations
• Need fine-grained control

When to Use CSS

• Simple transitions
• Better performance
• Hardware acceleration
• Easier to maintain

Coding Challenges

Challenge 19.1: Chronometer

Task: Create a stopwatch/timer with start/stop/reset buttons

Challenge 19.2: Bouncing Ball

Task: Create an animated ball that bounces around the screen

Key Takeaways

✅ setInterval repeats actions
✅ setTimeout delays an action
✅ requestAnimationFrame for smooth animations
✅ CSS animations are performant for simple effects
✅ JavaScript offers more control for complex animations
✅ Always stop animations when done

Quiz Questions

• What is the difference between setInterval and setTimeout?
• How do you cancel an interval or timeout?
• When should you use CSS animations vs JavaScript?
• What does requestAnimationFrame do?
• How do you control animation speed?

Next Module: Module 20 - Project 2: A Social News Web Page