Anime.js

Anime.js ist ein Animation Framework.

Links

https://animejs.com/
https://www.youtube.com/watch?v=uRDLFXxihgc - guter Einstieg
https://codepen.io/rexjbull/pen/RwRRezq Beispiel mit Scrollmagic

Quickstart

• create anime object

anime({});

• pass configuration object
  • target (CSS selector)
  • css properties die animiert werden sollen

anime({
  targets: '.square',
  translateX: '250px',
});

Mehr Properties

anime({
  targets: '.square',
  translateX: '250px',
  rotateZ: 360,
  scale: 2,
  loop: true,
  duration: 5000,
});

Besonderheiten

Anime.js kann einige besondere Dinge:

• Animieren von JavaScript Objekten (mit mindestens einem Zahlenwert)
• Animieren von DOM Attributen