requestAnimationFrame

requestAnimationFrame para animaciones suaves

requestAnimationFrame (rAF) ejecuta tu función justo antes del siguiente repaint, sincronizando actualizaciones con el render del navegador. Es ideal para animaciones fluidas y eficientes.

Por qué usar rAF

• Sincroniza con el refresco del monitor
• Pausa cuando la pestaña está en background
• Reduce el trabajo innecesario y ahorra batería

Animación básica

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

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

requestAnimationFrame(step);

Comparación con setInterval

// ❌ Bad: setInterval for animations
setInterval(() => {
  updatePosition();
}, 16);

// ✅ Good: requestAnimationFrame
function animate() {
  updatePosition();
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Throttling con rAF

// Throttle scroll events using rAF
let isTicking = false;

window.addEventListener('scroll', () => {
  if (!isTicking) {
    requestAnimationFrame(() => {
      updateScrollPosition();
      isTicking = false;
    });
    isTicking = true;
  }
});

Animaciones basadas en tiempo

// Time-based animation for consistent speed
let lastTime = 0;

function animate(time) {
  const delta = time - lastTime;
  lastTime = time;
  
  // Use delta time to move consistently
  position += speed * (delta / 1000);
  element.style.transform = `translateX(${position}px)`;
  
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);