anime

Anime.js v4 - A fast, multipurpose and lightweight JavaScript animation library. Use when creating animations, timelines, draggable interactions, SVG animations, text effects, or working with CSS properties, DOM attributes and JavaScript objects.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "anime" with this command: npx skills add hairyf/skills/hairyf-skills-anime

Anime.js is a fast, multipurpose and lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Version 4 introduces a modular architecture with ES modules, improved performance, and enhanced features like draggable interactions, animatable objects, and advanced timeline controls.

The skill is based on Anime.js v4.3.5, generated at 2026-01-29.

Core References

TopicDescriptionReference
AnimationBasic animation function, target selection, property animationcore-animation
TimelineSequential and parallel animations, labels, position controlcore-timeline
StaggerStaggered animations for multiple targetscore-stagger
Animation ParametersDuration, delay, easing, loop, callbackscore-parameters
TimercreateTimer, Timer—periodic callbacks, frameRate, playbackcore-timer

Features

Draggable

TopicDescriptionReference
DraggableCreate draggable elements with physics and constraintsfeatures-draggable
Draggable ConfigurationContainer bounds, snap, friction, velocityfeatures-draggable-config

Animatable

TopicDescriptionReference
AnimatableCreate animatable objects for custom animationsfeatures-animatable

Scope & Scroll

TopicDescriptionReference
ScopeScroll-based animations and viewport detectionfeatures-scope
Scroll (onScroll)Scroll-linked animations, progress, link(timeline)features-scroll

Layout

TopicDescriptionReference
Layout (AutoLayout)FLIP-style layout animations, accordion, enter/leavefeatures-layout

SVG

TopicDescriptionReference
SVG MorphingMorph SVG paths and shapesfeatures-svg-morph
SVG DrawingAnimate SVG path drawingfeatures-svg-draw
SVG Motion PathAnimate elements along an SVG pathfeatures-svg-motion-path

Text

TopicDescriptionReference
Text SplittingSplit text into words, lines, and charactersfeatures-text-split
Text AnimationAnimate text content and propertiesfeatures-text-animation

Easings

TopicDescriptionReference
Easing FunctionsBuilt-in easing functions (in, out, inOut)easings-functions
Custom EasingsCubic bezier, spring, steps, linear easingseasings-custom

Utilities

TopicDescriptionReference
UtilsDOM utilities, value helpers, math functionsutils-helpers

Advanced

TopicDescriptionReference
CompositionReplace, none, blend (additive) for overlapping animationsadvanced-composition
EngineGlobal engine—pause, resume, speed, timeUnit, precisionadvanced-engine
WAAPIWeb Animations API—waapi.animate for native animationsadvanced-waapi
Scope (createScope)Execution context, defaults, methods, keepTime, revertadvanced-scope

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

tailwindcss

No summary provided by upstream source.

Repository SourceNeeds Review
754-hairyf
General

hairy-utils

No summary provided by upstream source.

Repository SourceNeeds Review
689-hairyf
General

react-use

No summary provided by upstream source.

Repository SourceNeeds Review
503-hairyf
General

motion

No summary provided by upstream source.

Repository SourceNeeds Review
488-hairyf