How to Animate Your Website Using Vanilla JavaScript

Why Vanilla JavaScript for Animations?

Alright, let’s kick this off with a confession: I used to be a sucker for animation libraries. They’re shiny, packed with features, and — let’s be honest — sometimes a bit like training wheels. But over the years, I’ve come to appreciate the raw power of vanilla JavaScript for animations. There’s something incredibly satisfying about crafting that smooth fade or bounce effect yourself, without the overhead and mystery of a library doing it behind the scenes.

It’s not just about cutting down on dependencies—although that’s a nice bonus. Vanilla JS animations give you ultimate control, can be razor-fast when done right, and keep your bundle size lean. Plus, it’s a fantastic way to deepen your understanding of how browsers paint, composite, and render frames.

So if you’re ready to ditch the fluff and get your hands dirty with clean, performant animation code, this is your coffee-chat guide to making your website move using pure JavaScript.

Understanding the Basics: requestAnimationFrame is Your New Best Friend

First things first: forget setTimeout and setInterval for anything smooth or complex. The browser’s requestAnimationFrame API is where the magic happens. It syncs your animation updates with the browser’s repaint cycle, which means better performance and less jank.

Here’s a quick refresher to get you in the zone:

const box = document.querySelector('.box');
let start = null;

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  box.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

In this snippet, we’re moving a box element horizontally over 2 seconds. Notice how timestamp is passed by the browser, so you can track time precisely. This beats guessing delays or juggling timers.

Ever tried animations that felt jittery or laggy? This API will save you. It’s like the browser hands you the rhythm, and you just have to dance along.

Step-by-Step: Building a Simple Fade-In Animation

Let’s walk through a real-world example that I often use to introduce newcomers: a fade-in effect on page elements. It’s subtle but impactful — and a great way to practice timing and easing.

1. Set up your HTML: Imagine a simple <div> with the class fade-in.
2. Prepare the CSS: Initially, the element is transparent.

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

Now, here’s the kicker — instead of relying solely on CSS transitions, we’ll use JavaScript to control the opacity incrementally. This lets us layer in custom easing or chain animations later.

const element = document.querySelector('.fade-in');
let opacity = 0;

function fadeIn() {
  opacity += 0.02; // tweak this for speed
  element.style.opacity = opacity;
  if (opacity < 1) {
    requestAnimationFrame(fadeIn);
  }
}

fadeIn();

See what I did there? Instead of kicking off a CSS transition, I’m manually nudging the opacity up by 2% each frame. It’s simple, but you can layer in more complexity or tie it to scroll events later.

Scaling Up: Animating Multiple Properties

Now, here’s where things get fun — and where I’ve learned to be cautious. Animations involving multiple properties or complex sequences can quickly become spaghetti code if you’re not careful.

When animating, try to stick to properties that are GPU-friendly: transform and opacity are your pals. Don’t touch width, height, or top directly if you want buttery smoothness.

Say you want to slide and fade an element simultaneously. Here’s a little snippet I often use:

const element = document.querySelector('.box');
let start = null;

function animate(timestamp) {
  if (!start) start = timestamp;
  const elapsed = timestamp - start;
  const progress = Math.min(elapsed / 1000, 1); // 1 second duration

  element.style.transform = `translateX(${progress * 100}px)`;
  element.style.opacity = progress;

  if (progress < 1) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

Notice how I’m using progress to drive both properties simultaneously? This keeps things in sync and makes your animations feel cohesive.

Pro Tip: Easing Functions to Make It Feel Right

Linear progress is fine for testing, but life isn’t linear — and neither should your animations be. Easing functions add personality and realism.

I’m a fan of Robert Penner’s easing equations — the classics. You can code them yourself or grab a lightweight snippet. Here’s a quick example of an easeOutQuad function:

function easeOutQuad(t) {
  return t * (2 - t);
}

Plug it in like this:

const easedProgress = easeOutQuad(progress);
element.style.transform = `translateX(${easedProgress * 100}px)`;
element.style.opacity = easedProgress;

Suddenly, your box glides in with a nice deceleration. It’s subtle but makes all the difference between a robotic and a human feel.

When to Use CSS Animations (and When Not To)

Okay, I’m not here to bash CSS animations. They’re great for simple stuff or when you want to keep your JS light. But they can feel rigid if you want dynamic control — say, responding to user input mid-animation, or chaining complex sequences.

Vanilla JavaScript shines when you need that fine-grained control, or when animations depend on runtime calculations. For example, animating based on scroll position or data-driven movement.

That said, a combo approach often works best: use CSS for simple transitions, and layer on JS for the heavy lifting.

Real-World Example: A Scroll-Triggered Animation

Here’s a little story from the trenches. I was once tasked with animating a feature card that slides in and fades when it enters the viewport — but only once.

Using vanilla JS and IntersectionObserver, I set it up like this:

const cards = document.querySelectorAll('.feature-card');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

cards.forEach(card => observer.observe(card));

Then the .animate-in class triggers a JS-powered animation or a CSS transition. This hybrid approach minimized performance impact and kept the code clean.

Ever tried to animate on scroll without IntersectionObserver? Ugh, the headaches. This API is a game-changer.

Debugging Tips: When Your Animation Isn’t Playing Nice

Here’s a little checklist I keep in my back pocket when animations go sideways:

• Are you animating GPU-friendly properties? (Hint: transform and opacity are best.)
• Is requestAnimationFrame set up properly and looping?
• Check for conflicting CSS transitions or styles overriding your JS.
• Are you resetting animation state correctly? Sometimes stale values cause weird jumps.
• Console.log is your friend — log progress and timestamps to verify timing.

Honestly, it’s often a tiny misstep—like forgetting to increment a value or miscalculating progress—that trips you up.

Wrapping It Up (For Real This Time)

So, there you have it. Animations using vanilla JavaScript aren’t just doable — they’re empowering. You get to craft exactly what you want, learn the browser’s rhythm, and keep your projects nimble.

It’s a skill that pays off no matter if you’re building slick landing pages, interactive dashboards, or just want to jazz up your portfolio. Plus, it’s a neat way to impress dev friends at parties. (No promises on that last one.)

Next time you catch yourself reaching for a library to animate a button or fade in a modal, pause and ask: can vanilla JS handle this? Odds are, it can — and probably better.

So… what’s your next move? Give these snippets a spin, tinker with easing functions, or try hooking animations to scroll. Then come back and tell me what you built or where you got stuck. I’m genuinely curious.