svg-animation-motion-expert

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).