Lottie & SVG Animation

Prasyarat: Lesson ini mengasumsikan kamu sudah paham dasar DOM, basic JavaScript, dan konsep SVG (element <path>, <circle>, dll). Jika belum, baca dulu lesson CSS Animasi & Transisi dan Canvas API Dasar (Creative Web) supaya mental model-nya utuh.

Lottie adalah library animasi yang memutar file JSON yang diekspor dari Adobe After Effects via plugin Bodymovin. SVG Animation memungkinkan kamu menganimasi elemen vektor langsung di browser tanpa gambar raster.

Mengapa Lottie?

• Kualitas tinggi — animasi vektor, tajam di semua resolusi
• Ringan — file JSON jauh lebih kecil dari video atau GIF
• Interaktif — bisa dikontrol via JavaScript (play, pause, seek)
• Cross-platform — web, iOS, Android, React Native

Setup Lottie

npm install lottie-web
# atau untuk React:
npm install lottie-react

// Vanilla JS
import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',    // 'svg' | 'canvas' | 'html'
  loop: true,
  autoplay: true,
  path: '/animations/my-animation.json',
  // atau langsung dari data:
  // animationData: require('./animation.json'),
});

// Control
animation.play();
animation.pause();
animation.stop();
animation.setSpeed(0.5);   // 50% kecepatan
animation.goToAndPlay(30); // mulai dari frame 30

// React dengan lottie-react
import Lottie from 'lottie-react';
import animationData from './animation.json';

function LoadingSpinner() {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      style={{ width: 200, height: 200 }}
    />
  );
}

SVG Animation dengan CSS

SVG elemen bisa dianimasi langsung dengan CSS:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="dot" cx="50" cy="50" r="10" fill="#3b82f6" />
</svg>

#dot {
  animation: pulse 1.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pulse {
  0%, 100% { r: 10; opacity: 1; }
  50% { r: 20; opacity: 0.5; }
}

SVG Path Animation — stroke-dasharray

Teknik populer untuk animasi "menggambar" garis:

.path {
  stroke-dasharray: 300;    /* panjang total path */
  stroke-dashoffset: 300;   /* sembunyikan semua */
  animation: draw 2s ease-out forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;   /* tampilkan semua */
  }
}

// Hitung panjang path otomatis
const path = document.querySelector('path');
const length = path.getTotalLength();

path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

SVG SMIL (Synchronized Multimedia Integration Language)

SMIL adalah cara animasi SVG yang sudah ada lama, langsung di HTML:

<svg viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="20" fill="#ef4444">
    <!-- Animasi SMIL langsung di SVG -->
    <animate
      attributeName="r"
      values="20;40;20"
      dur="2s"
      repeatCount="indefinite"
    />
    <animate
      attributeName="opacity"
      values="1;0.3;1"
      dur="2s"
      repeatCount="indefinite"
    />
  </circle>
</svg>

Perbandingan Pendekatan

Tips Praktis

// Gunakan Lottie dengan interaksi hover
const anim = lottie.loadAnimation({ /* ... */ loop: false, autoplay: false });

element.addEventListener('mouseenter', () => anim.play());
element.addEventListener('mouseleave', () => anim.stop());

// Gunakan segment untuk play bagian tertentu
anim.playSegments([0, 60], true);   // frame 0-60
anim.playSegments([60, 120], true); // frame 60-120

Lottie dan SVG animation sangat berguna untuk ilustrasi, icon animasi, dan loading state yang membutuhkan kualitas visual tinggi.