{"id":"50d0063b-cfd6-4b65-967c-3281b8c45d99","shortId":"d3fLxW","kind":"skill","title":"animejs-animation","tagline":"Advanced JavaScript animation library skill for creating complex, high-performance web animations.","description":"# Anime.js Animation Skill\n\n[Anime.js](https://animejs.com/) is a lightweight but extremely powerful JavaScript animation engine. It excels at complex timelines, staggering, and precise control over DOM, CSS, and SVGs.\n\n## Context\n\nThis skill is used for creating high-fidelity, jaw-dropping web animations that go far beyond simple CSS transitions. It's the tool of choice for awards-caliber interactive sites.\n\n## When to Use\nTrigger this skill when:\n\n- Creating complex, multi-stage landing page orchestrations.\n- Implementing staggered animations for revealing grids, text, or data visualizations.\n- Animating SVG paths (morphing shapes, drawing dynamic lines).\n- Building highly interactive, kinetic UI elements that respond fluidly to user input.\n\n## Execution Workflow\n\n1. **Identify Targets**: Select the DOM elements or SVGs to be animated.\n2. **Define Properties & Easing**: Specify values to animate. **Crucially**, utilize advanced easing functions (e.g., custom `cubicBezier`, `spring`, or `elastic`) instead of basic `linear` or `ease-in-out` to make the motion feel expensive and natural.\n3. **Orchestrate Timelines**: Use `anime.timeline()` to sequence complex choreography. Master the use of timeline offsets (relative `'-=200'` vs absolute) to create seamless overlapping motion.\n4. **Implement**:\n   ```javascript\n   const tl = anime.timeline({\n     easing: \"spring(1, 80, 10, 0)\",\n     duration: 1000,\n   });\n   tl.add({\n     targets: \".hero-text\",\n     translateY: [50, 0],\n     opacity: [0, 1],\n     delay: anime.stagger(100),\n   }).add(\n     { targets: \".hero-image\", scale: [0.9, 1], opacity: [0, 1] },\n     \"-=800\",\n   );\n   ```\n\n## Strict Rules\n\n- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build common, boring transitions. Every animation should feel bespoke, fluid, and heavily polished.\n- **Staggering**: Leverage `anime.stagger()` extensively to add organic rhythm to multiple elements.\n- **Performance**: Monitor main thread usage; use `will-change: transform, opacity` where appropriate for GPU acceleration.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["animejs","animation","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-animejs-animation","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/animejs-animation","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34964 github stars · SKILL.md body (2,433 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-25T00:50:26.226Z","embedding":null,"createdAt":"2026-04-18T21:31:01.221Z","updatedAt":"2026-04-25T00:50:26.226Z","lastSeenAt":"2026-04-25T00:50:26.226Z","tsv":"'/)':23 '0':211,221,223,237 '0.9':234 '1':128,208,224,235,238 '10':210 '100':227 '1000':213 '2':140 '200':192 '3':176 '4':200 '50':220 '80':209 '800':239 'absolut':194,242 'acceler':298 'add':228,277 'advanc':4,150 'agent':244 'anim':3,6,16,18,31,61,98,106,139,147,264 'anime.js':17,20 'anime.stagger':226,274 'anime.timeline':180,205 'animej':2 'animejs-anim':1 'animejs.com':22 'animejs.com/)':21 'appropri':295 'ask':332 'award':77 'awards-calib':76 'basic':161 'bespok':267 'beyond':65 'bore':261 'boundari':340 'build':114,250,259 'calib':78 'chang':291 'choic':74 'choreographi':184 'clarif':334 'clear':307 'common':260 'complex':11,36,89,183 'const':203 'context':47 'control':41 'creat':10,53,88,196 'creativ':252 'criteria':343 'crucial':148 'css':44,67 'cubicbezi':155 'custom':154 'data':104 'defin':141 'delay':225 'describ':311 'dom':43,133 'draw':111 'drop':59 'durat':212 'dynam':112 'e.g':153 'eas':143,151,165,206 'ease-in-out':164 'elast':158 'element':119,134,282 'engin':32 'environ':323 'environment-specif':322 'everi':263 'excel':34 'execut':126 'expens':173 'expert':328 'extens':275 'extrem':28 'far':64 'feel':172,266 'fidel':56 'fluid':122,268 'function':152 'go':63 'gpu':297 'grid':101 'heavili':270 'hero':217,231 'hero-imag':230 'hero-text':216 'high':13,55,115 'high-fidel':54 'high-perform':12 'identifi':129 'imag':232 'implement':96,201 'input':125,337 'instead':159 'interact':79,116 'javascript':5,30,202 'jaw':58 'jaw-drop':57 'kinet':117 'land':93 'leverag':273 'librari':7 'lightweight':26 'limit':299 'line':113 'linear':162 'main':285 'make':169 'mandat':243 'master':185 'match':308 'miss':345 'modern':251 'monitor':284 'morph':109 'motion':171,199 'multi':91 'multi-stag':90 'multipl':281 'must':245 'natur':175 'offset':190 'opac':222,236,293 'orchestr':95,177 'organ':278 'output':317 'overlap':198 'page':94 'path':108 'perform':14,283 'permiss':338 'polish':271 'power':29 'precis':40 'properti':142 'relat':191 'requir':336 'respond':121 'reveal':100 'review':329 'rhythm':279 'rule':241 'safeti':339 'scale':233 'scope':310 'seamless':197 'select':131 'sequenc':182 'shape':110 'simpl':66 'site':80 'skill':8,19,49,86,248,302 'skill-animejs-animation' 'source-sickn33' 'specif':324 'specifi':144 'spring':156,207 'stage':92 'stagger':38,97,272 'stop':330 'strict':240 'stun':255 'substitut':320 'success':342 'svg':107 'svgs':46,136 'target':130,215,229 'task':306 'test':326 'text':102,218 'thread':286 'timelin':37,178,189 'tl':204 'tl.add':214 'tool':72 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':292 'transit':68,262 'translatey':219 'treat':315 'trigger':84 'ui':118 'ui/ux':256 'usag':287 'use':51,83,179,187,288,300 'user':124 'util':149,246 'valid':325 'valu':145 'visual':105,254 'vs':193 'web':15,60 'will-chang':289 'workflow':127","prices":[{"id":"18809597-74b3-4357-a23b-ce5ca0dcf369","listingId":"50d0063b-cfd6-4b65-967c-3281b8c45d99","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:31:01.221Z"}],"sources":[{"listingId":"50d0063b-cfd6-4b65-967c-3281b8c45d99","source":"github","sourceId":"sickn33/antigravity-awesome-skills/animejs-animation","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/animejs-animation","isPrimary":false,"firstSeenAt":"2026-04-18T21:31:01.221Z","lastSeenAt":"2026-04-25T00:50:26.226Z"}],"details":{"listingId":"50d0063b-cfd6-4b65-967c-3281b8c45d99","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"animejs-animation","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34964,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T06:41:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"8a08f75a175d325b66085a02fe13a7f441216a49","skill_md_path":"skills/animejs-animation/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/animejs-animation"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"animejs-animation","description":"Advanced JavaScript animation library skill for creating complex, high-performance web animations."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/animejs-animation"},"updatedAt":"2026-04-25T00:50:26.226Z"}}