SVG Animation Builder
From the author
Creates animated SVGs using GSAP (GreenSock Animation Platform) and the SVG DOM API. Generates timeline-based animations with morphing paths via flubber and scroll-triggered sequences using ScrollTrigger plugin.
Install
npx skills add agentskillexchange/skills --skill 'SVG Animation Builder' -a claude-code
Installs to .claude/skills/SVG-Animation-Builder/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 82
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- gsapMindrally/skillsExpert guidelines for building high-performance animations with GSAP (GreenSock Animation Platform)Media★ 286
- gsap-scrolltriggergreensock/gsap-skillsOfficial GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specified.OfficialMedia★ 17.2K
- svg-animation-motion-expertroedyrustam/vibes-plugExpert guide for web animations: SVG manipulation, Framer Motion 12+, GSAP 3, CSS Scroll-Driven Animations, and View Transitions API / Panduan ahli animasi web.Media★ 113
- motion2codelovisdotio/motion2codeRebuilds an AI-generated (or any) flat motion design video as clean, editable code: inline SVG shapes animated by one GSAP timeline, seekable frame by frame, looping seamlessly, checked side by side against the source; and optionally turns an interface recording into a real interactive website (GSAP ScrollTrigger, real clicks). Ships scripts to study the video (frames, cuts, contact sheet, exact palette), render the code to mp4/GIF through anim.seek, compare it with the source frame by frame and check the loop seam and page contract. Use when the user wants a video, GIF, Lottie-like clip, motion design shot, animated logo, UI screen recording or AI video "recreated in code", "converted to SVG/GSAP", "made into an HTML animation" or "made into a real site". Not for photographic footage, 3D rendering or video editing.Design★ 274
- gsap-pluginsgreensock/gsap-skillsOfficial GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.OfficialScience★ 17.2K
- visual-flow-gifAI-Builder-Club/skillsCreate animated flow diagrams from articles, workflow notes, architecture sketches, or process descriptions using a JSON specification and a local Python/Pillow renderer. Use when the user wants to turn source material into a static PNG + animated GIF diagram.Media★ 1.3K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in