Imported from guneet-baweja/cinematic-portfolio (.agents/skills/animejs/SKILL.md). Install upstream with npx skills add guneet-baweja/cinematic-portfolio --skill animejs. Copyright stays with the author.

Anime.js Micro-Animations & SVG Manipulation

Anime.js is ideal for targeted micro-interactions, SVG stroke animation, morphing, and lightweight typography choreography.

SVG Line Drawing & Morphing

import anime from 'animejs';

// Animate SVG stroke draw-in
export function drawSvgPath(selector: string) {
  anime({
    targets: selector,
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) { return i * 250 },
    direction: 'alternate',
    loop: true
  });
}

Typography Stagger Reveal

import anime from 'animejs';

export function animateLetterEntrance(elements: HTMLElement[]) {
  anime({
    targets: elements,
    translateY: [40, 0],
    opacity: [0, 1],
    easing: 'easeOutExpo',
    duration: 1200,
    delay: anime.stagger(30, { start: 200 })
  });
}

Architecture Rule

• Single Owner Principle: Never use Anime.js and GSAP on the same element's properties simultaneously. Use GSAP for page-wide scroll/timelines and Anime.js for self-contained SVG or DOM micro-interactions.