Skip to content

Web Animation Libraries Cheat Sheet

Βιβλιοθήκες κινουμένων σχεδίων JavaScript

GSAP

Κορυφαία βιβλιοθήκη κινουμένων σχεδίων υψηλής απόδοσης στον κλάδο, που υποστηρίζει ιδιότητες CSS, SVG, Canvas κ.λπ., και ενσωματώνεται απρόσκοπτα με framework όπως το React και το Vue.

  • Χαρακτηριστικά: Υψηλή απόδοση, εύκολο στη χρήση, ισχυρό, υποστηρίζει timelines

  • Εγκατάσταση: npm install gsap

  • Χρήση:

    import { gsap } from "gsap";

gsap.to(".box", { duration: 2, x: 100 });

Anime.js

Ελαφριά βιβλιοθήκη κινουμένων σχεδίων JavaScript, που υποστηρίζει ιδιότητες CSS, SVG, ιδιότητες DOM και κίνηση αντικειμένων JavaScript.

  • Χαρακτηριστικά: Απλό στη χρήση, ελαφρύ, υποστηρίζει πολλούς τύπους κίνησης

  • Εγκατάσταση: npm install animejs

  • Χρήση:

    import anime from 'animejs/lib/anime.es.js';

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000
});

Velocity.js

Συνδυάζει την ευκολία χρήσης του jQuery με την υψηλή απόδοση του CSS, υποστηρίζοντας ουρές κινουμένων σχεδίων και στοιχεία περιβάλλοντος.

  • Χαρακτηριστικά: Ουρές κινουμένων σχεδίων, στοιχεία περιβάλλοντος, εύκολο στη χρήση

  • Εγκατάσταση: npm install velocity-animate

  • Χρήση:

    import velocity from 'velocity-animate';

velocity(document.querySelector(".box"), { translateX: 250 }, { duration: 2000 });

Βιβλιοθήκες κινουμένων σχεδίων CSS

Animate.css

Μια βιβλιοθήκη κινουμένων σχεδίων CSS πλούσια σε εφέ, τα οποία μπορούν να επιτευχθούν απλώς προσθέτοντας ονόματα κλάσεων.

  • Χαρακτηριστικά: Πλούσια εφέ κίνησης, απλή χρήση, καλή συμβατότητα

  • Εγκατάσταση: npm install animate.css --save

  • Χρήση:

    <link rel="stylesheet" href="animate.css">
<div class="animated bounce">Hello World!</div>

Hover.css

Μια βιβλιοθήκη εφέ αιώρησης κουμπιών που υλοποιείται αποκλειστικά με CSS3, περιέχοντας μια ποικιλία εφέ αιώρησης.

  • Χαρακτηριστικά: Πλούσια εφέ, υλοποιείται μόνο με CSS3, εύκολο στη χρήση

  • Εγκατάσταση: npm install hover.css

  • Χρήση:

    <link rel="stylesheet" href="hover.css">
<a class="hvr-grow">Grow</a>

CSShake

Ένα σύνολο κλάσεων κίνησης CSS3 για τη δημιουργία εφέ δόνησης, ταλάντευσης κ.λπ.

  • Χαρακτηριστικά: Μοναδικά εφέ κίνησης, υλοποιείται μόνο με CSS3, εύκολο στη χρήση

  • Εγκατάσταση: npm install csshake

  • Χρήση:

    <link rel="stylesheet" href="csshake.css">
<div class="shake-little">Shake it!</div>