← Volver a la Lección

🎨 Animaciones SVG con GSAP

Anima elementos SVG más allá de las limitaciones de CSS

1. SVG Path Drawing

Animate stroke-dashoffset to create drawing effects. Note: DrawSVG plugin (Club GreenSock) provides more control, but this technique works with vanilla GSAP. 

// Calculate path length first
const path = document.querySelector('#drawPath');
const length = path.getTotalLength();

// Set initial state
gsap.set(path, {
  strokeDasharray: length,
  strokeDashoffset: length
});

// Animate drawing
gsap.to(path, {
  strokeDashoffset: 0,
  duration: 2,
  ease: 'power2.inOut'
});

2. SVG Transforms & Rotation

Animate SVG elements with transform origin control. 

// Rotate with transform origin
gsap.to('#rotatingCircle', {
  rotation: 360,
  transformOrigin: '50% 50%',
  duration: 2,
  ease: 'power2.inOut',
  repeat: -1
});

// Scale animation
gsap.to('#rotatingRect', {
  scale: 1.5,
  transformOrigin: '50% 50%',
  duration: 1,
  yoyo: true,
  repeat: -1
});

3. Follow SVG Path

Animate elements along an SVG path. Note: MotionPath plugin (Club GreenSock) provides easier API, but this shows the concept. 

// Get path points (simplified approach)
const path = document.querySelector('#motionPath');
const follower = document.querySelector('#follower');

// Animate along path using motionPath plugin (Club GreenSock)
// Or manually calculate points for vanilla GSAP
gsap.to(follower, {
  motionPath: {
    path: '#motionPath',
    autoRotate: true
  },
  duration: 3,
  ease: 'none',
  repeat: -1
});

4. Complex SVG Animation

Combine multiple SVG techniques for engaging animations. 

const tl = gsap.timeline();

// Draw path
tl.to('.path-line', {
  strokeDashoffset: 0,
  duration: 1
})
// Animate circles
.to('.svg-circle', {
  scale: 1.5,
  rotation: 360,
  transformOrigin: '50% 50%',
  duration: 1,
  stagger: 0.2,
  ease: 'back.out(1.7)'
}, '-=0.5')
// Fade out
.to('.svg-circle', {
  opacity: 0.3,
  duration: 0.5
});
💡 Key Concepts: