Anime Js

by mindrally97184105b5daNo license269 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 5 weeks ago

Expert guidelines for building performant animations with Anime.js animation library

Instructions onlySoftware Development Design & Creative

AI-generated overview

Guidelines and code examples for building performant web animations with the Anime.js JavaScript library.

What it does: This skill supplies expert guidance for creating animations with Anime.js. It covers installation and imports, basic animations, performance optimization, timelines, stagger effects, easing functions, SVG animation, function-based values, callbacks, React integration, a Web Animations API bridge, and reduced-motion accessibility. It produces instructional prose and JavaScript or TypeScript code snippets rather than runnable scripts.
When to use it: Use it when writing or reviewing Anime.js animation code for a web project. It is suited to tasks involving timelines, stagger effects, SVG motion, easing, or animation performance tuning, including React components.
Requirements: No scripts are included; it is instructions only. The guidance assumes a JavaScript or TypeScript web project with the animejs package installed via npm, and React for the React integration examples.

Anime.js Animation Guidelines

You are an expert in Anime.js, JavaScript, and web animation performance. Follow these guidelines when creating animations.

Core Principles

Installation and Import

javascript

// Full importimport anime from "animejs";
// Modular import for smaller bundle sizeimport { animate, timeline, stagger } from "animejs";

// Full importimport anime from "animejs";
// Modular import for smaller bundle sizeimport { animate, timeline, stagger } from "animejs";

Basic Animation

javascript

anime({  targets: ".element",  translateX: 250,  rotate: "1turn",  duration: 800,  easing: "easeInOutQuad"});

anime({  targets: ".element",  translateX: 250,  rotate: "1turn",  duration: 800,  easing: "easeInOutQuad"});

Performance Optimization

Frame Rate Control

javascript

// Adjust global frame rate for lower-end devicesanime.suspendWhenDocumentHidden = true;
// Control FPS for specific animationsanime({  targets: ".element",  translateX: 250,  update: function(anim) {    // Custom frame rate limiting if needed  }});

// Adjust global frame rate for lower-end devicesanime.suspendWhenDocumentHidden = true;
// Control FPS for specific animationsanime({  targets: ".element",  translateX: 250,  update: function(anim) {    // Custom frame rate limiting if needed  }});

Use Transforms Over Layout Properties

javascript

// Good - uses GPU-accelerated transformsanime({  targets: ".element",  translateX: 100,  // Good  translateY: 50,   // Good  scale: 1.2,       // Good  rotate: 45,       // Good  opacity: 0.5      // Good});
// Avoid - causes layout recalculationanime({  targets: ".element",  left: 100,        // Avoid  top: 50,          // Avoid  width: 200,       // Avoid  height: 150       // Avoid});

// Good - uses GPU-accelerated transformsanime({  targets: ".element",  translateX: 100,  // Good  translateY: 50,   // Good  scale: 1.2,       // Good  rotate: 45,       // Good  opacity: 0.5      // Good});
// Avoid - causes layout recalculationanime({  targets: ".element",  left: 100,        // Avoid  top: 50,          // Avoid  width: 200,       // Avoid  height: 150       // Avoid});

Use Animatable for High-Frequency Updates

javascript

import { Animatable } from "animejs";
// Optimized for continuous updates (mouse tracking, etc.)const animatable = new Animatable(".cursor", {  x: 0,  y: 0});
document.addEventListener("mousemove", (e) => {  animatable.x = e.clientX;  animatable.y = e.clientY;});

import { Animatable } from "animejs";
// Optimized for continuous updates (mouse tracking, etc.)const animatable = new Animatable(".cursor", {  x: 0,  y: 0});
document.addEventListener("mousemove", (e) => {  animatable.x = e.clientX;  animatable.y = e.clientY;});

Timeline Animations

Basic Timeline

javascript

const tl = anime.timeline({  easing: "easeOutExpo",  duration: 750});
tl.add({  targets: ".header",  translateY: [-50, 0],  opacity: [0, 1]}).add({  targets: ".content",  translateY: [30, 0],  opacity: [0, 1]}, "-=500") // Overlap by 500ms.add({  targets: ".footer",  translateY: [30, 0],  opacity: [0, 1]}, "-=500");

const tl = anime.timeline({  easing: "easeOutExpo",  duration: 750});
tl.add({  targets: ".header",  translateY: [-50, 0],  opacity: [0, 1]}).add({  targets: ".content",  translateY: [30, 0],  opacity: [0, 1]}, "-=500") // Overlap by 500ms.add({  targets: ".footer",  translateY: [30, 0],  opacity: [0, 1]}, "-=500");

Timeline Controls

javascript

const tl = anime.timeline({  autoplay: false});
// Control methodstl.play();tl.pause();tl.restart();tl.reverse();tl.seek(1000); // Go to 1 second

const tl = anime.timeline({  autoplay: false});
// Control methodstl.play();tl.pause();tl.restart();tl.reverse();tl.seek(1000); // Go to 1 second

Stagger Animations

Basic Stagger

javascript

anime({  targets: ".grid-item",  translateY: [50, 0],  opacity: [0, 1],  delay: anime.stagger(100) // 100ms delay between each});

anime({  targets: ".grid-item",  translateY: [50, 0],  opacity: [0, 1],  delay: anime.stagger(100) // 100ms delay between each});

Advanced Stagger Options

javascript

// Stagger from centeranime({  targets: ".grid-item",  scale: [0, 1],  delay: anime.stagger(100, { from: "center" })});
// Grid staggeranime({  targets: ".grid-item",  scale: [0, 1],  delay: anime.stagger(50, {    grid: [14, 5],    from: "center"  })});
// Stagger with easinganime({  targets: ".item",  translateX: 250,  delay: anime.stagger(100, { easing: "easeOutQuad" })});

// Stagger from centeranime({  targets: ".grid-item",  scale: [0, 1],  delay: anime.stagger(100, { from: "center" })});
// Grid staggeranime({  targets: ".grid-item",  scale: [0, 1],  delay: anime.stagger(50, {    grid: [14, 5],    from: "center"  })});
// Stagger with easinganime({  targets: ".item",  translateX: 250,  delay: anime.stagger(100, { easing: "easeOutQuad" })});

Easing Functions

Built-in Easings

javascript

// Common easingsanime({  targets: ".element",  translateX: 250,  easing: "easeOutExpo"     // Fast start, slow end  // easing: "easeInOutQuad" // Smooth both ends  // easing: "easeOutElastic(1, .5)" // Bouncy  // easing: "easeOutBounce" // Bounce effect  // easing: "spring(1, 80, 10, 0)" // Physics-based});

// Common easingsanime({  targets: ".element",  translateX: 250,  easing: "easeOutExpo"     // Fast start, slow end  // easing: "easeInOutQuad" // Smooth both ends  // easing: "easeOutElastic(1, .5)" // Bouncy  // easing: "easeOutBounce" // Bounce effect  // easing: "spring(1, 80, 10, 0)" // Physics-based});

Custom Easing

SVG Animation

Path Animation

javascript

const path = anime.path(".motion-path");
anime({  targets: ".element",  translateX: path("x"),  translateY: path("y"),  rotate: path("angle"),  easing: "linear",  duration: 2000,  loop: true});

const path = anime.path(".motion-path");
anime({  targets: ".element",  translateX: path("x"),  translateY: path("y"),  rotate: path("angle"),  easing: "linear",  duration: 2000,  loop: true});

Line Drawing

javascript

anime({  targets: "path",  strokeDashoffset: [anime.setDashoffset, 0],  easing: "easeInOutSine",  duration: 1500,  delay: anime.stagger(250)});

anime({  targets: "path",  strokeDashoffset: [anime.setDashoffset, 0],  easing: "easeInOutSine",  duration: 1500,  delay: anime.stagger(250)});

Morphing

javascript

anime({  targets: "path",  d: [    { value: "M10 10 L90 10 L90 90 L10 90 Z" },    { value: "M10 50 Q50 10 90 50 Q50 90 10 50 Z" }  ],  easing: "easeInOutQuad",  duration: 1000,  loop: true,  direction: "alternate"});

anime({  targets: "path",  d: [    { value: "M10 10 L90 10 L90 90 L10 90 Z" },    { value: "M10 50 Q50 10 90 50 Q50 90 10 50 Z" }  ],  easing: "easeInOutQuad",  duration: 1000,  loop: true,  direction: "alternate"});

Function-Based Values

Dynamic Values

javascript

anime({  targets: ".element",  translateX: function(el, i) {    return i * 100; // Each element moves further  },  rotate: function(el, i, total) {    return (360 / total) * i; // Distribute rotation  },  delay: function(el, i) {    return i * 50;  }});

anime({  targets: ".element",  translateX: function(el, i) {    return i * 100; // Each element moves further  },  rotate: function(el, i, total) {    return (360 / total) * i; // Distribute rotation  },  delay: function(el, i) {    return i * 50;  }});

Callbacks and Events

Animation Events

javascript

anime({  targets: ".element",  translateX: 250,  begin: function(anim) {    console.log("Animation started");  },  update: function(anim) {    console.log(Math.round(anim.progress) + "%");  },  complete: function(anim) {    console.log("Animation completed");  }});

anime({  targets: ".element",  translateX: 250,  begin: function(anim) {    console.log("Animation started");  },  update: function(anim) {    console.log(Math.round(anim.progress) + "%");  },  complete: function(anim) {    console.log("Animation completed");  }});

Looping

javascript

anime({  targets: ".element",  translateX: 250,  direction: "alternate",  loop: true,  loopComplete: function(anim) {    console.log("Loop completed");  }});

anime({  targets: ".element",  translateX: 250,  direction: "alternate",  loop: true,  loopComplete: function(anim) {    console.log("Loop completed");  }});

React Integration

Basic React Usage

tsx

import { useEffect, useRef } from "react";import anime from "animejs";
function AnimatedComponent() {  const elementRef = useRef(null);
  useEffect(() => {    const animation = anime({      targets: elementRef.current,      translateX: 250,      duration: 800    });
    return () => {      animation.pause(); // Cleanup    };  }, []);
  return <div ref={elementRef}>Animated</div>;}

import { useEffect, useRef } from "react";import anime from "animejs";
function AnimatedComponent() {  const elementRef = useRef(null);
  useEffect(() => {    const animation = anime({      targets: elementRef.current,      translateX: 250,      duration: 800    });
    return () => {      animation.pause(); // Cleanup    };  }, []);
  return <div ref={elementRef}>Animated</div>;}

With useCallback for Controls

tsx

function ControlledAnimation() {  const elementRef = useRef(null);  const animationRef = useRef(null);
  const playAnimation = useCallback(() => {    animationRef.current = anime({      targets: elementRef.current,      translateX: [0, 250],      duration: 800    });  }, []);
  useEffect(() => {    return () => {      animationRef.current?.pause();    };  }, []);
  return (    <>      <div ref={elementRef}>Animated</div>      <button onClick={playAnimation}>Play</button>    </>  );}

function ControlledAnimation() {  const elementRef = useRef(null);  const animationRef = useRef(null);
  const playAnimation = useCallback(() => {    animationRef.current = anime({      targets: elementRef.current,      translateX: [0, 250],      duration: 800    });  }, []);
  useEffect(() => {    return () => {      animationRef.current?.pause();    };  }, []);
  return (    <>      <div ref={elementRef}>Animated</div>      <button onClick={playAnimation}>Play</button>    </>  );}

Web Animations API Bridge

Using WAAPI for Native Performance

javascript

import { wapiAnimate } from "animejs";
// Uses browser's native Web Animations APIwapiAnimate(".element", {  translateX: 250,  duration: 800});

import { wapiAnimate } from "animejs";
// Uses browser's native Web Animations APIwapiAnimate(".element", {  translateX: 250,  duration: 800});

Accessibility

Respect Reduced Motion

javascript

const prefersReducedMotion = window.matchMedia(  "(prefers-reduced-motion: reduce)").matches;
anime({  targets: ".element",  translateX: 250,  duration: prefersReducedMotion ? 0 : 800,  easing: prefersReducedMotion ? "linear" : "easeOutExpo"});

const prefersReducedMotion = window.matchMedia(  "(prefers-reduced-motion: reduce)").matches;
anime({  targets: ".element",  translateX: 250,  duration: prefersReducedMotion ? 0 : 800,  easing: prefersReducedMotion ? "linear" : "easeOutExpo"});

Best Practices Summary

Use transforms (translate, scale, rotate) over layout properties
Import only needed modules for smaller bundle size
Use stagger for multiple element animations
Clean up animations on component unmount
Use Animatable for high-frequency updates
Leverage timeline for complex sequences
Use function-based values for dynamic animations
Respect reduced motion preferences
Consider WAAPI bridge for native performance
Test on lower-powered devices

Source and attribution

Source:mindrally/skillsinanime-jsat commit9718410

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Anime Js

Anime.js Animation Guidelines

Core Principles

Installation and Import

Basic Animation

Performance Optimization

Frame Rate Control

Use Transforms Over Layout Properties

Use Animatable for High-Frequency Updates

Timeline Animations

Basic Timeline

Timeline Controls

Stagger Animations

Basic Stagger

Advanced Stagger Options

Easing Functions

Built-in Easings

Custom Easing

SVG Animation

Path Animation

Line Drawing

Morphing

Function-Based Values

Dynamic Values

Callbacks and Events

Animation Events

Looping

React Integration

Basic React Usage

With useCallback for Controls

Web Animations API Bridge

Using WAAPI for Native Performance

Accessibility

Respect Reduced Motion

Best Practices Summary

Source and attribution

More from mindrally/skills

Zustand State Management

Zod Schema Validation

Woocommerce

Wordpress

Websocket Development

Web Development

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices