AI导哈

设计与多媒体

lottie-animation

iart-ai/web-ani…n-skills

This skill should be used when the user asks to "add a Lottie animation", "play a .lottie or .json animation", "integrate a Bodymovin/After Effects animation on web or mobile", "control Lottie playback / segments", "make a scroll-driven Lottie", "recolor a Lottie at runtime", or "export an AE animation to Lottie". Covers dotLottie/lottie-web integration, playback control, interactivity, theming, and the AE export checklist.

  • 2384 次安装
  • 64 星标
  • 收录于

安装命令

npx skills add https://github.com/iart-ai/web-animation-skills --skill lottie-animation

SKILL.md

Lottie Animation

The bridge from After Effects to product: vector animation shipped as JSON (or zipped .lottie), tiny and resolution-independent, played by a runtime on web, iOS, Android, and React Native. This skill covers integrating, controlling, and exporting Lottie.

When to use

  • Ship a designer's AE animation to web/iOS/Android/React Native
  • Looping illustrations, onboarding, empty states, animated icons
  • Scroll-driven or interaction-driven vector playback (hover, click, cursor)
  • Runtime theming/recoloring instead of re-exporting per brand

Formats: .json vs .lottie

  • .json — the raw Bodymovin output. Human-readable, larger.
  • .lottie — a zipped container (often 60–80% smaller) that can bundle multiple animations, images, and theming. Preferred for shipping. Player: @lottiefiles/dotlottie-web (modern, canvas + WASM) supersedes the older lottie-web.

Prefer the dotLottie runtime for new work; use lottie-web only for legacy .json + SVG renderer needs.

Core workflow (web, dotLottie)

相关 Skills

accessible-animationiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.设计与多媒体281860fps-animationiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation choppy".设计与多媒体2771svg-animationiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an icon/logo", or "animate an SVG gradient or filter". Covers stroke-dashoffset draw-on, path morphing, motion-along-path, and animated icons/gradients/filters via CSS, SMIL, and GSAP.设计与多媒体2743micro-interactioniart-ai/web-ani…n-skillsThis skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI feedback". Covers UI motion with Framer Motion (motion/react) and modern CSS.前端开发2701gsap-webiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip", "sync ScrollTrigger with Lenis", "Lenis smooth scroll jittery", "ScrollTrigger markers drift", "ScrollTrigger pins break with Lenis/Locomotive", or "set up smooth scroll with GSAP pinning". Covers GSAP timelines, ScrollTrigger, SplitText, Flip, and Lenis/Locomotive smooth-scroll sync for code-driven web motion.设计与多媒体2661glassmorphismiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights, SVG liquid-glass refraction, motion on hover/scroll/enter, and accessible reduced-transparency fallbacks.设计与多媒体2580