Anime.js: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 39: | Zeile 39: | ||
* Animieren von '''JavaScript Objekten''' (mit mindestens einem Zahlenwert) | * Animieren von '''JavaScript Objekten''' (mit mindestens einem Zahlenwert) | ||
* Animieren von '''DOM Attributen''' | * Animieren von '''DOM Attributen''' | ||
| + | |||
| + | == Staggering == | ||
| + | https://animejs.com/documentation/#staggeringBasics | ||
Version vom 16. Januar 2021, 16:16 Uhr
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
