Otsu

01 — Overview

Figma-to-React conversion featuring advanced GSAP animations. Deep dive into timeline orchestration, scroll-triggered animations, and performant motion design.

The Challenge

The client provided a Figma design for a personal portfolio featuring complex scroll-triggered animations, parallax effects, and orchestrated entrance sequences. The design required precise timing and smooth performance while maintaining a 60fps experience across devices.

The main challenge was translating static Figma frames into fluid, timeline-based animations using GSAP while integrating seamlessly with React's component lifecycle and avoiding common pitfalls like animation cleanup and memory leaks.

Implementation

I built the project using React and GSAP's Timeline API, which allowed me to sequence multiple animations with precise control over timing, easing, and overlap. The key was using the useGSAP hook from @gsap/react for proper React integration.

const HeroSection = () => {
  const containerRef = useRef(null);
  const titleRef = useRef(null);
  const imageRef = useRef(null);

  useGSAP(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: titleRef.current,
        start: 'top 80%',
      }
    });

    // Orchestrated entrance
    tl.from(titleRef.current, {
      opacity: 0, y: 50, duration: 1
    })
    .from(imageRef.current, {
      scale: 0.8, opacity: 0
    }, '-=0.5'); // Overlap by 0.5s
  }, { scope: containerRef });

  return (...);
}

Using useGSAP from @gsap/react instead of useEffect provides automatic cleanup and better React 19 compatibility. Timeline overlap ('-=0.5') creates smooth, overlapping animations that feel organic rather than robotic.

Animation Architecture

The project featured several animation patterns:

Performance Optimization

Achieving 60fps animations required careful optimization:

Results

The client was extremely satisfied with the smooth, professional animations that matched their design vision perfectly. The portfolio successfully showcased their work while maintaining excellent performance metrics.

Key Learnings

Technical Insights