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

Staggering

https://animejs.com/documentation/#staggeringBasics

Morphing SVG

https://codepen.io/kholja/pen/KKgbBQe

Anime.js kann im Prinzip alle Werte in Bereichen verändern. Das funktioniert auch mit dem d Attribut in SVG Path Elementen oder Polygonen etc. Dabei sind ein paar Vorarbeiten notwendig:

• Punktanzahl der Pfade sollte gleich sein.
• Bei Pfaden kann es bei relativen Pfadangaben Probleme geben
• Bei Punkten die mit H oder V (Horizontal, Vertikal) angegeben sind gibt es nur eine statt zwei Koordinaten. Das kann dazu führen dass unterschiedliche viele Werte entstehen.

Im Vergleich zum GSAP Morph Plugin ist Anime.js deutlich unflexibler. Performance ist aber OK und es ist kostenfrei. Für kleine Morphs durchaus geeignet. Beispiel

<div>
    <button id="b1">Play</button>
  </div>
  <div id="ani1">
    <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="5" clip-rule="evenodd" viewBox="0 0 282 181">
      <path fill="none" stroke="#000" stroke-width="2" d="M2 178L70 61l21 37 7-12 19 32 9 15 20-33 13 23 54-93 22 37 8-14 36 64"/>
  </svg>
 </div>

var ani1 = anime({
  targets: document.querySelector("#ani1 path"),
  // using range [] on 2 paths here, coordinates are converted to absolute values.
  d: [
    "M 0,178 L 70,61 L 91,98 L 98,86 L 117,118 L 126,133 L 146,100 L 159,123 L 213,30 L 235,67 L 243,53 L 279,117",
    "M 0,178 L 73,99 L 92,120 L 98,120 L 106,133 L 134,2 L 164,178L180,120 L197,120L212,102 L224,116 L279,116"], 
  easing: 'easeInOutCubic',
  duration: 1000,
  autoplay: false,
  loop: true,
  direction: 'alternate',
  delay: 1000,
  endDelay:500,
});

document.querySelector('#b1').onclick = ani1.play;