SVG & Web Animation Motion Expert

English | Bahasa Indonesia

---

English

Description

A dedicated skill for crafting fluid, high-performance web animations and micro-interactions. Covers direct SVG manipulation (paths, masks, clip-paths), React-based animations using Framer Motion 12+, advanced timeline choreography with GSAP 3, native CSS Scroll-Driven Animations, and the View Transitions API for seamless page navigations.

Trigger Conditions

• When building complex landing page animations or scroll reveals.
• When creating interactive SVG graphics, charts, or diagrams.
• When the user asks for "buttery smooth", "apple-like", or "dynamic" interactions.
• When implementing page transitions using the native View Transitions API.

Core Architecture & Guidelines

1. Framer Motion 12+ (React/Next.js)

Use Framer Motion for declarative component animations, layout animations, and gesture-driven interactions.

• Layout Animations: Use the layout prop to automatically animate between flexbox/grid state changes.
• Performance: Use style={{ x, y }} with useTransform and useScroll instead of triggering React state updates on every frame.

'use client'

import { motion, useScroll, useTransform } from 'framer-motion'
import { useRef } from 'react'

export function ScrollReveal({ children }: { children: React.ReactNode }) {
  const ref = useRef(null)
  const { scrollYProgress } = useScroll({ target: ref, offset: ['0 1', '1 1'] })
  const y = useTransform(scrollYProgress, [0, 1], [100, 0])
  const opacity = useTransform(scrollYProgress, [0, 1], [0, 1])

  return (
    <motion.div ref={ref} style={{ y, opacity }}>
      {children}
    </motion.div>
  )
}

2. GSAP 3 (Complex Choreography)

Use GSAP when you need highly coordinated timeline sequences, path tracing, or when working outside of React (Vanilla JS).

• ScrollTrigger: The industry standard for complex scroll-based animations.
• DrawSVG / MorphSVG: Use for advanced SVG path drawing and morphing (requires Club GreenSock, use open-source alternatives if unavailable).

3. Native CSS Scroll-Driven Animations

Where possible, leverage modern native CSS to tie animations to scroll position on the compositor thread for zero-JS performance.

@keyframes slide-in {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal-on-scroll {
  animation: slide-in linear both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

4. SVG Optimization & Manipulation

• Always run SVGs through SVGO to strip bloat before animating.
• Keep viewBox responsive.
• Target <path>, <circle>, and <mask/> elements via CSS vars or inline Framer Motion logic.

Orchestration & Integration

• Works hand-in-hand with ui-ux-pro-max and monday-design-aesthetic to bring designs to life.
• Complements senior-frontend by handling the motion layer of the UI.
• Integrates with seo-aeo-landing-page-writer to build visually stunning landing pages.

---

Bahasa Indonesia

Deskripsi

Skill khusus untuk membuat animasi web dan interaksi mikro yang lancar dan berkinerja tinggi. Mencakup manipulasi SVG langsung, animasi berbasis React menggunakan Framer Motion 12+, koreografi timeline lanjutan dengan GSAP 3, CSS Scroll-Driven Animations native, dan View Transitions API.

Kondisi Pemicu

• Saat membangun animasi landing page yang kompleks.
• Saat membuat grafik, chart, atau diagram SVG interaktif.
• Saat pengguna meminta interaksi yang "sangat mulus", "mirip Apple", atau "dinamis".
• Saat mengimplementasikan transisi halaman menggunakan View Transitions API native.

Panduan Arsitektur Inti

1. Framer Motion 12+ (React/Next.js)

Gunakan Framer Motion untuk animasi komponen deklaratif, animasi layout, dan interaksi gestur.

• Hindari memicu pembaruan state React pada setiap frame animasi. Gunakan useTransform dan useScroll yang beroperasi di luar siklus render React untuk performa 60fps.

2. GSAP 3

Gunakan GSAP untuk urutan timeline yang sangat terkoordinasi atau saat bekerja di luar ekosistem React. Plugin ScrollTrigger sangat berguna untuk merangkai aksi kompleks berdasarkan posisi scroll.

3. CSS Scroll-Driven Animations Native

Manfaatkan CSS modern (animation-timeline: view()) untuk mengikat animasi ke posisi scroll langsung di compositor thread tanpa JavaScript sama sekali. Ini memberikan performa terbaik untuk efek paralaks dan reveal.

4. Manipulasi SVG

• Selalu optimasi SVG (buang tag tidak perlu) sebelum dianimasikan.
• Gunakan <clipPath> dan <mask> untuk transisi transisi pengungkapan gambar yang dramatis.

Integrasi Orkestrasi

• Bekerja sama dengan ui-ux-pro-max dan monday-design-aesthetic untuk menghidupkan desain statis.
• Melengkapi senior-frontend dengan menangani lapisan pergerakan (motion layer) UI.
• Terintegrasi dengan seo-aeo-landing-page-writer untuk merancang landing page yang memukau secara visual.