← Volver a la Lección

🎨 Patrones de Diseño con GSAP

Patrones de animación comunes para desarrollo web profesional

1. Micro-interactions

Button click feedback and satisfying micro-animations. 

// Button click feedback
function animateButton(btn) {
  const tl = gsap.timeline();

  tl.to(btn, {
    scale: 0.95,
    duration: 0.1
  })
  .to(btn, {
    scale: 1,
    duration: 0.2,
    ease: 'back.out(3)'
  });

  return tl;
}

document.querySelectorAll('.btn').forEach((btn) => {
  btn.addEventListener('click', () => animateButton(btn));
});

2. Page Transitions

Smooth transitions between content states.

Page 1

This is the first page content. Click the button to transition to the next page.

Page 2

Welcome to page 2! The transition animation creates a smooth flow between pages.

Page 3

Final page with a different transition style. Notice how the content fades and slides.

function pageTransition(oldPage, newPage) {
  const tl = gsap.timeline();

  // Exit animation
  tl.to(oldPage, {
    opacity: 0,
    y: -50,
    duration: 0.4,
    ease: 'power2.in'
  });

  // Enter animation
  tl.from(newPage, {
    opacity: 0,
    y: 50,
    duration: 0.6,
    ease: 'power2.out'
  }, '-=0.2');

  return tl;
}

3. Loading Sequences

Engaging loading animations that keep users engaged.

Loading...
function loadingAnimation() {
  const tl = gsap.timeline();

  // Rotate logo
  tl.to('.loader-logo', {
    rotation: 360,
    duration: 1,
    ease: 'power2.inOut',
    repeat: 2
  });

  // Stagger dots
  tl.to('.dot', {
    scale: 1.5,
    opacity: 0.5,
    duration: 0.4,
    stagger: 0.2,
    yoyo: true,
    repeat: 2,
    ease: 'power2.inOut'
  }, '-=1');

  // Fade out loader
  tl.to('.loader', {
    scale: 3,
    opacity: 0,
    duration: 0.8,
    ease: 'power4.in'
  });

  // Reveal content
  tl.from('.content', {
    opacity: 0,
    y: 20,
    duration: 0.8,
    ease: 'power3.out'
  }, '-=0.5');

  return tl;
}

4. Content Reveal

Staggered content reveals for engaging page loads.

First Element

This element reveals first

Second Element

This follows with a stagger

Third Element

Final element completes the sequence

// Staggered reveal
gsap.to('.content-reveal', {
  opacity: 1,
  y: 0,
  duration: 0.6,
  stagger: 0.2,
  ease: 'power2.out'
});
💡 Key Concepts: