Alessandro Fraleoni | Full-Stack Web Developer con sede a Roma

🔙 Indietro

Anime.js è una libreria JavaScript leggera ma potente, progettata per semplificare la creazione di animazioni complesse e performanti nel browser.
Supporta elementi DOM, SVG, CSS e oggetti JavaScript, offrendo un’API moderna e intuitiva per animatori e sviluppatori frontend.

🧰 Stack Tecnologico

Anime.js – per l’animazione di elementi HTML, SVG, proprietà CSS e oggetti
CDN / NPM – per l’integrazione flessibile nel progetto
JavaScript – linguaggio principale per scrivere le animazioni

🛠️ Prerequisiti

Conoscenza base di HTML/CSS/JavaScript
Editor di codice come VS Code
Un browser moderno

📦 Installazione

1. Utilizzo via CDN:

<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>

2. Oppure via npm:

npm install animejs

Poi nel codice:

import anime from 'animejs';

🎬 Primo Esempio

HTML

<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 50px;
}

JS

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeOutQuad'
});

Questo sposterà il box orizzontalmente di 250px in un secondo con un easing fluido.

🧩 Caratteristiche Principali

Targets

Puoi animare:

Selettori CSS (.box, #id)
DOM node (document.querySelector)
Oggetti JS
Array misti

Proprietà Animabili

Proprietà CSS (opacity, width, color)
Transformazioni (translateX, rotate, scale)
Attributi SVG (cx, d)
Proprietà di oggetti JS (value, progress, x, y)

Parametri utili

anime({
  targets: '.box',
  rotate: 360,
  scale: 1.5,
  duration: 1200,
  delay: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutSine'
});

⏱️ Timeline e Sequenze

Anime.js supporta la timeline, utile per concatenare animazioni:

let tl = anime.timeline({ easing: 'easeOutExpo', duration: 750 });

tl.add({ targets: '.box', translateX: 250 })
  .add({ targets: '.box', scale: 2 }, '+=500')
  .add({ targets: '.box', rotate: 360 });

🧠 Funzionalità Avanzate

Stagger

anime({
  targets: '.item',
  translateY: 100,
  delay: anime.stagger(100)
});

Spring Animation

anime({
  targets: '.box',
  scale: [1, 1.2],
  easing: 'spring(1, 80, 10, 0)',
  duration: 800
});

⚛️ Integrazione con React

Esempio con useEffect:

import anime from 'animejs';
import { useEffect, useRef } from 'react';

const AnimatedBox = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    anime({
      targets: boxRef.current,
      scale: [1, 1.5],
      loop: true,
      direction: 'alternate',
      easing: 'easeInOutSine'
    });
  }, []);

  return <div ref={boxRef} className="box" />;
};

📚 Risorse Utili

📚 Conclusione

Anime.js è uno strumento moderno per portare animazioni avanzate nelle tue interfacce web.
Grazie alla sua semplicità e flessibilità, si adatta perfettamente sia a piccoli effetti visivi che a transizioni complesse in progetti professionali.

👉 Contattami per una consulenza frontend

Introduzione ad Anime.js: animazioni web potenti e semplici