Wikizone - Benutzerbeiträge [de]

Animation im Web

2021-01-17T10:40:14Z

84.157.18.194:

== Quickstart ==
In früheren Zeiten war die Standardantwort für "bewegte" Webseiten ganz einfach Flash. Heutzutage gibt es viele Lösungen um Animationen auf eine Webseite zu bringen. Dieser Artikel soll eine kleine Übersicht bringen.

Stichworte: Anime.js, GSAP, CSS Transform, CSS Keyframes, Snap, Waypoints, Lottie, ScrollMagic

== Links ==
Siehe auch in den Sections
[[Scroll-Snap]]
[[Anime.js]]
http://imakewebthings.com/waypoints/guides/getting-started/

== Überblick ==
=== GSAP & ScrollMagic ===
[[GSAP]]
Gehört zu den Standardlösungen. GSAP - Greensock Animation Plattform bietet JavaScript Tools für Timeline-basierte Animationen. Ergänzend kann ScrollMagic die Steuerung der Timelines basierend auf der Skrollposition der Webseite steuern.

Vorteil:
* Alle DOM Elemente können animiert werden. Nicht nur in der Bewegung sondern auch in der Farbe, Sichtbarkeit...
* Gute Performance
* Mit ScrollMagic einfaches Steuern beim Scrolling inklusive einfaches Pinning (fixieren während der Animation)
Nachteil:
* Skriptlastig, wobei es nicht so komplex ist wie bei anderen Lösungen.

=== Vector + AfterFX + Bodymovin + Lottie ===
https://www.youtube.com/watch?v=i6qfQ8QDOfs&feature=emb_rel_end
Ein weiterer vielversprechender Workflow.
* Vektordateien erstellen
* In AfterFX importieren. Hier gibt es mehrere Möglichkeiten. Illustrator Dateine kann man direkt importieren, für Sketch gibt es ein Importtool, das auch die Layer mitnimmt. More to check out...
* Animation in AfterFX erstellen
* Mit dem AfterFX Bodymovin Plugin exportierst du die Animation als JSON File.
* Lottie kann die erstellt Datei rendern. Die Lottie Library gibt es für den Browser, aber auch für iOS und Android - dort werden die Dateien Nativ gerendert.
* Lottie Animationen können auch mit GSAP gesteuert werden.
https://greensock.com/forums/topic/18343-timelinemax-scrollmagic-lottie-web-bodymoving-is-it-possible-is-it-necessary/
https://www.youtube.com/watch?time_continue=308&v=HeY9qGUT3zQ&feature=emb_logo

Vorteil:
* Einfache Erstellung mit AfterFX
* Natives Rendern in Apps möglich -> gute Performance
Nachteil:
* Keine DOM Elemente
* Player nicht so frei positionierbar.

=== Only CSS ===
[[CSS Transitions]]
[[CSS Animation]]
CSS3 stellt einfache Möglichkeiten zur Verfügung Elemente (auch SVG Pfade) zu animieren.
Vorteil:
* Ohne JavaScript
* Für einfache Animationen einfach zu realisieren
* Performant wenn Properties verwendet werden, die der Browser nativ rechnen kann (z.B. alle transform Eigenschaften)
Nachteil:
* Komplexe Animationen umständlich

[[JQuery - Animation]]

== Animation mit CSS only ==
[[CSS Transitions]]
[[CSS Animation]]

== Animation mit JavaScript,CSS SVG und Canvas ==
=== Cooler Triangles Tiles Effekt ===
http://codepen.io/mistic100/pen/JobPLK (2016-12)

<syntaxhighlight lang="html5">
<div id="tiles"></div>
<p>Enhancement of my original <a href="http://codepen.io/mistic100/pen/GFHkm">Colorful Tiles</a> with truly random animation.</p>
<p>At the end of each cycle (49 steps) a new Perlin noise map is generated.</p>
</syntaxhighlight>

<syntaxhighlight lang="css">
body { background:#111; }
#tiles { margin:0 auto; }
p { max-width:680px; margin:10px auto; color:white; font:16px "Calibri", sans-serif; }
a { color:#3E7289; }
</syntaxhighlight>

<syntaxhighlight lang="javascript">
(function(){
if (!SVG.supported) {
alert('SVG not supported !');
return;
}

// parameters
var size = { x: 680, y: 400, tile: 40 },
speed = 50,
tile_nb = { x: Math.ceil(size.x/size.tile)+1, y: Math.ceil(size.y/size.tile)+1 },
colors = ["#ED1156", "#ED194E", "#ED2247", "#ED2B3F", "#EE3438", "#EE3D31", "#EE4529", "#EF4E22", "#EF571A", "#EF6013", "#F0690C", "#E8720E", "#E17B10", "#D98512", "#D28E14", "#CB9816", "#C3A118", "#BCAA1A", "#B4B41C", "#ADBD1E", "#A6C721", "#96C62F", "#87C53E", "#78C44D", "#69C35C", "#5AC26B", "#4AC17A", "#3BC089", "#2CBF98", "#1DBEA7", "#0EBDB6", "#0EBAB0", "#0EB8AA", "#0EB5A4", "#0EB39E", "#0EB098", "#0EAE92", "#0EAB8C", "#0EA986", "#0EA680", "#0EA47B", "#269376", "#3F8372", "#58736E", "#71626A", "#895266", "#A24262", "#BB315E", "#D4215A"],
objects = [],
values = [],
nb_colors = colors.length;

// function to generate simplex noise map
function generateValues(add) {
var values = [], foo,
simplex = new SimplexNoise();

for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
foo = Math.round((simplex.noise(c/10, l/10)+1) / 2 * nb_colors) + add;
values.push(foo, foo+1, foo+2, foo+3);
}
}

return values;
}

// init canvas
var container = document.getElementById('tiles');
container.style.width = size.x+'px';
container.style.height = size.y+'px';

var paper = SVG(container).size(size.x, size.y),
pos, cmd,
counter = 0;

// draw tiles
for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
pos = { x: c*size.tile, y: l*size.tile };

// tile 1
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile) +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 2
cmd = (pos.x+size.tile) +','+ (pos.y+size.tile) +' '+ pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 3
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 4
cmd = pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
}
}

// cycle colors
values[0] = generateValues(0);
values[1] = generateValues(nb_colors);

setInterval(function() {
var idx;
for (var i=0, l=objects.length; i<l; i++) {
idx = Math.round((values[1][i]-values[0][i]) * counter/(nb_colors-1) + values[0][i]);
if (idx >= nb_colors) idx = idx%nb_colors;
objects[i].fill(colors[idx]);
}

counter++;
if (counter == nb_colors) {
counter = 1;
values[0] = values[1].map(function(v) { return v-nb_colors; });
values[1] = generateValues(nb_colors);
}
}, speed);

// bug in svg.js
var temp = document.getElementById('SvgjsSvg1002');
temp.parentNode.removeChild(temp);
}());
</syntaxhighlight>

Animation im Web

2021-01-17T10:13:52Z

84.157.18.194:

== Quickstart ==
In früheren Zeiten war die Standardantwort für "bewegte" Webseiten ganz einfach Flash. Heutzutage gibt es viele Lösungen um Animationen auf eine Webseite zu bringen. Dieser Artikel soll eine kleine Übersicht bringen.

Stichworte: Anime.js, Gsap, CSS Transform, CSS Keyframes, Snap

== Links ==
Siehe auch in den Sections
[[Scroll-Snap]]
[[Anime.js]]

== Überblick ==
=== GSAP & ScrollMagic ===
[[GSAP]]
Gehört zu den Standardlösungen. GSAP - Greensock Animation Plattform bietet JavaScript Tools für Timeline-basierte Animationen. Ergänzend kann ScrollMagic die Steuerung der Timelines basierend auf der Skrollposition der Webseite steuern.

Vorteil:
* Alle DOM Elemente können animiert werden. Nicht nur in der Bewegung sondern auch in der Farbe, Sichtbarkeit...
* Gute Performance
* Mit ScrollMagic einfaches Steuern beim Scrolling inklusive einfaches Pinning (fixieren während der Animation)
Nachteil:
* Skriptlastig, wobei es nicht so komplex ist wie bei anderen Lösungen.

=== Vector + AfterFX + Bodymovin + Lottie ===
https://www.youtube.com/watch?v=i6qfQ8QDOfs&feature=emb_rel_end
Ein weiterer vielversprechender Workflow.
* Vektordateien erstellen
* In AfterFX importieren. Hier gibt es mehrere Möglichkeiten. Illustrator Dateine kann man direkt importieren, für Sketch gibt es ein Importtool, das auch die Layer mitnimmt. More to check out...
* Animation in AfterFX erstellen
* Mit dem AfterFX Bodymovin Plugin exportierst du die Animation als JSON File.
* Lottie kann die erstellt Datei rendern. Die Lottie Library gibt es für den Browser, aber auch für iOS und Android - dort werden die Dateien Nativ gerendert.
* Lottie Animationen können auch mit GSAP gesteuert werden.
https://greensock.com/forums/topic/18343-timelinemax-scrollmagic-lottie-web-bodymoving-is-it-possible-is-it-necessary/
https://www.youtube.com/watch?time_continue=308&v=HeY9qGUT3zQ&feature=emb_logo

Vorteil:
* Einfache Erstellung mit AfterFX
* Natives Rendern in Apps möglich -> gute Performance
Nachteil:
* Keine DOM Elemente
* Player nicht so frei positionierbar.

=== Only CSS ===
[[CSS Transitions]]
[[CSS Animation]]
CSS3 stellt einfache Möglichkeiten zur Verfügung Elemente (auch SVG Pfade) zu animieren.
Vorteil:
* Ohne JavaScript
* Für einfache Animationen einfach zu realisieren
* Performant wenn Properties verwendet werden, die der Browser nativ rechnen kann (z.B. alle transform Eigenschaften)
Nachteil:
* Komplexe Animationen umständlich

[[JQuery - Animation]]

== Animation mit CSS only ==
[[CSS Transitions]]
[[CSS Animation]]

== Animation mit JavaScript,CSS SVG und Canvas ==
=== Cooler Triangles Tiles Effekt ===
http://codepen.io/mistic100/pen/JobPLK (2016-12)

<syntaxhighlight lang="html5">
<div id="tiles"></div>
<p>Enhancement of my original <a href="http://codepen.io/mistic100/pen/GFHkm">Colorful Tiles</a> with truly random animation.</p>
<p>At the end of each cycle (49 steps) a new Perlin noise map is generated.</p>
</syntaxhighlight>

<syntaxhighlight lang="css">
body { background:#111; }
#tiles { margin:0 auto; }
p { max-width:680px; margin:10px auto; color:white; font:16px "Calibri", sans-serif; }
a { color:#3E7289; }
</syntaxhighlight>

<syntaxhighlight lang="javascript">
(function(){
if (!SVG.supported) {
alert('SVG not supported !');
return;
}

// parameters
var size = { x: 680, y: 400, tile: 40 },
speed = 50,
tile_nb = { x: Math.ceil(size.x/size.tile)+1, y: Math.ceil(size.y/size.tile)+1 },
colors = ["#ED1156", "#ED194E", "#ED2247", "#ED2B3F", "#EE3438", "#EE3D31", "#EE4529", "#EF4E22", "#EF571A", "#EF6013", "#F0690C", "#E8720E", "#E17B10", "#D98512", "#D28E14", "#CB9816", "#C3A118", "#BCAA1A", "#B4B41C", "#ADBD1E", "#A6C721", "#96C62F", "#87C53E", "#78C44D", "#69C35C", "#5AC26B", "#4AC17A", "#3BC089", "#2CBF98", "#1DBEA7", "#0EBDB6", "#0EBAB0", "#0EB8AA", "#0EB5A4", "#0EB39E", "#0EB098", "#0EAE92", "#0EAB8C", "#0EA986", "#0EA680", "#0EA47B", "#269376", "#3F8372", "#58736E", "#71626A", "#895266", "#A24262", "#BB315E", "#D4215A"],
objects = [],
values = [],
nb_colors = colors.length;

// function to generate simplex noise map
function generateValues(add) {
var values = [], foo,
simplex = new SimplexNoise();

for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
foo = Math.round((simplex.noise(c/10, l/10)+1) / 2 * nb_colors) + add;
values.push(foo, foo+1, foo+2, foo+3);
}
}

return values;
}

// init canvas
var container = document.getElementById('tiles');
container.style.width = size.x+'px';
container.style.height = size.y+'px';

var paper = SVG(container).size(size.x, size.y),
pos, cmd,
counter = 0;

// draw tiles
for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
pos = { x: c*size.tile, y: l*size.tile };

// tile 1
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile) +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 2
cmd = (pos.x+size.tile) +','+ (pos.y+size.tile) +' '+ pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 3
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 4
cmd = pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
}
}

// cycle colors
values[0] = generateValues(0);
values[1] = generateValues(nb_colors);

setInterval(function() {
var idx;
for (var i=0, l=objects.length; i<l; i++) {
idx = Math.round((values[1][i]-values[0][i]) * counter/(nb_colors-1) + values[0][i]);
if (idx >= nb_colors) idx = idx%nb_colors;
objects[i].fill(colors[idx]);
}

counter++;
if (counter == nb_colors) {
counter = 1;
values[0] = values[1].map(function(v) { return v-nb_colors; });
values[1] = generateValues(nb_colors);
}
}, speed);

// bug in svg.js
var temp = document.getElementById('SvgjsSvg1002');
temp.parentNode.removeChild(temp);
}());
</syntaxhighlight>

Animation im Web

2021-01-17T10:12:07Z

84.157.18.194: /* Links */

== Quickstart ==
In früheren Zeiten war die Standardantwort für "bewegte" Webseiten ganz einfach Flash. Heutzutage gibt es viele Lösungen um Animationen auf eine Webseite zu bringen. Dieser Artikel soll eine kleine Übersicht bringen.
== Links ==
Siehe auch in den Sections
[[Scroll-Snap]]
[[Anime.js]]

== Überblick ==
=== GSAP & ScrollMagic ===
[[GSAP]]
Gehört zu den Standardlösungen. GSAP - Greensock Animation Plattform bietet JavaScript Tools für Timeline-basierte Animationen. Ergänzend kann ScrollMagic die Steuerung der Timelines basierend auf der Skrollposition der Webseite steuern.

Vorteil:
* Alle DOM Elemente können animiert werden. Nicht nur in der Bewegung sondern auch in der Farbe, Sichtbarkeit...
* Gute Performance
* Mit ScrollMagic einfaches Steuern beim Scrolling inklusive einfaches Pinning (fixieren während der Animation)
Nachteil:
* Skriptlastig, wobei es nicht so komplex ist wie bei anderen Lösungen.

=== Vector + AfterFX + Bodymovin + Lottie ===
https://www.youtube.com/watch?v=i6qfQ8QDOfs&feature=emb_rel_end
Ein weiterer vielversprechender Workflow.
* Vektordateien erstellen
* In AfterFX importieren. Hier gibt es mehrere Möglichkeiten. Illustrator Dateine kann man direkt importieren, für Sketch gibt es ein Importtool, das auch die Layer mitnimmt. More to check out...
* Animation in AfterFX erstellen
* Mit dem AfterFX Bodymovin Plugin exportierst du die Animation als JSON File.
* Lottie kann die erstellt Datei rendern. Die Lottie Library gibt es für den Browser, aber auch für iOS und Android - dort werden die Dateien Nativ gerendert.
* Lottie Animationen können auch mit GSAP gesteuert werden.
https://greensock.com/forums/topic/18343-timelinemax-scrollmagic-lottie-web-bodymoving-is-it-possible-is-it-necessary/
https://www.youtube.com/watch?time_continue=308&v=HeY9qGUT3zQ&feature=emb_logo

Vorteil:
* Einfache Erstellung mit AfterFX
* Natives Rendern in Apps möglich -> gute Performance
Nachteil:
* Keine DOM Elemente
* Player nicht so frei positionierbar.

=== Only CSS ===
[[CSS Transitions]]
[[CSS Animation]]
CSS3 stellt einfache Möglichkeiten zur Verfügung Elemente (auch SVG Pfade) zu animieren.
Vorteil:
* Ohne JavaScript
* Für einfache Animationen einfach zu realisieren
* Performant wenn Properties verwendet werden, die der Browser nativ rechnen kann (z.B. alle transform Eigenschaften)
Nachteil:
* Komplexe Animationen umständlich

[[JQuery - Animation]]

== Animation mit CSS only ==
[[CSS Transitions]]
[[CSS Animation]]

== Animation mit JavaScript,CSS SVG und Canvas ==
=== Cooler Triangles Tiles Effekt ===
http://codepen.io/mistic100/pen/JobPLK (2016-12)

<syntaxhighlight lang="html5">
<div id="tiles"></div>
<p>Enhancement of my original <a href="http://codepen.io/mistic100/pen/GFHkm">Colorful Tiles</a> with truly random animation.</p>
<p>At the end of each cycle (49 steps) a new Perlin noise map is generated.</p>
</syntaxhighlight>

<syntaxhighlight lang="css">
body { background:#111; }
#tiles { margin:0 auto; }
p { max-width:680px; margin:10px auto; color:white; font:16px "Calibri", sans-serif; }
a { color:#3E7289; }
</syntaxhighlight>

<syntaxhighlight lang="javascript">
(function(){
if (!SVG.supported) {
alert('SVG not supported !');
return;
}

// parameters
var size = { x: 680, y: 400, tile: 40 },
speed = 50,
tile_nb = { x: Math.ceil(size.x/size.tile)+1, y: Math.ceil(size.y/size.tile)+1 },
colors = ["#ED1156", "#ED194E", "#ED2247", "#ED2B3F", "#EE3438", "#EE3D31", "#EE4529", "#EF4E22", "#EF571A", "#EF6013", "#F0690C", "#E8720E", "#E17B10", "#D98512", "#D28E14", "#CB9816", "#C3A118", "#BCAA1A", "#B4B41C", "#ADBD1E", "#A6C721", "#96C62F", "#87C53E", "#78C44D", "#69C35C", "#5AC26B", "#4AC17A", "#3BC089", "#2CBF98", "#1DBEA7", "#0EBDB6", "#0EBAB0", "#0EB8AA", "#0EB5A4", "#0EB39E", "#0EB098", "#0EAE92", "#0EAB8C", "#0EA986", "#0EA680", "#0EA47B", "#269376", "#3F8372", "#58736E", "#71626A", "#895266", "#A24262", "#BB315E", "#D4215A"],
objects = [],
values = [],
nb_colors = colors.length;

// function to generate simplex noise map
function generateValues(add) {
var values = [], foo,
simplex = new SimplexNoise();

for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
foo = Math.round((simplex.noise(c/10, l/10)+1) / 2 * nb_colors) + add;
values.push(foo, foo+1, foo+2, foo+3);
}
}

return values;
}

// init canvas
var container = document.getElementById('tiles');
container.style.width = size.x+'px';
container.style.height = size.y+'px';

var paper = SVG(container).size(size.x, size.y),
pos, cmd,
counter = 0;

// draw tiles
for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
pos = { x: c*size.tile, y: l*size.tile };

// tile 1
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile) +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 2
cmd = (pos.x+size.tile) +','+ (pos.y+size.tile) +' '+ pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 3
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 4
cmd = pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
}
}

// cycle colors
values[0] = generateValues(0);
values[1] = generateValues(nb_colors);

setInterval(function() {
var idx;
for (var i=0, l=objects.length; i<l; i++) {
idx = Math.round((values[1][i]-values[0][i]) * counter/(nb_colors-1) + values[0][i]);
if (idx >= nb_colors) idx = idx%nb_colors;
objects[i].fill(colors[idx]);
}

counter++;
if (counter == nb_colors) {
counter = 1;
values[0] = values[1].map(function(v) { return v-nb_colors; });
values[1] = generateValues(nb_colors);
}
}, speed);

// bug in svg.js
var temp = document.getElementById('SvgjsSvg1002');
temp.parentNode.removeChild(temp);
}());
</syntaxhighlight>

Anime.js

2021-01-17T07:38:25Z

84.157.18.194:

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
http://snapsvg.io/ SVG Tools

== Quickstart ==

* create anime object
anime({});
* pass configuration object
** target (CSS selector)
** css properties die animiert werden sollen

<syntaxhighlight lang="javascript">
anime({
targets: '.square',
translateX: '250px',
});
</syntaxhighlight>

=== Mehr Properties ===

<syntaxhighlight lang="javascript">
anime({
targets: '.square',
translateX: '250px',
rotateZ: 360,
scale: 2,
loop: true,
duration: 5000,
});
</syntaxhighlight>

=== 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''
<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>

==Helpüers==

<syntaxhighlight lang="javascript">
// import anime from '../../../src/index.js';

/* Ontersection observer */

!function(t,e){"use strict";function n(t){this.time=t.time,this.target=t.target,this.rootBounds=t.rootBounds,this.boundingClientRect=t.boundingClientRect,this.intersectionRect=t.intersectionRect||a(),this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=e.width*e.height,i=this.intersectionRect,o=i.width*i.height;n?this.intersectionRatio=o/n:this.intersectionRatio=this.isIntersecting?1:0}function i(t,e){var n=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(n.root&&1!=n.root.nodeType)throw new Error("root must be an Element");this._checkForIntersections=r(this._checkForIntersections.bind(this),this.THROTTLE_TIMEOUT),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(n.rootMargin),this.thresholds=this._initThresholds(n.threshold),this.root=n.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" ")}function o(){return t.performance&&performance.now&&performance.now()}function r(t,e){var n=null;return function(){n||(n=setTimeout(function(){t(),n=null},e))}}function s(t,e,n,i){"function"==typeof t.addEventListener?t.addEventListener(e,n,i||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,i){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,i||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,n)}function c(t,e){var n=Math.max(t.top,e.top),i=Math.min(t.bottom,e.bottom),o=Math.max(t.left,e.left),r=Math.min(t.right,e.right),s=r-o,h=i-n;return s>=0&&h>=0&&{top:n,bottom:i,left:o,right:r,width:s,height:h}}function u(t){var e;try{e=t.getBoundingClientRect()}catch(n){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):a()}function a(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function l(t,e){for(var n=e;n;){if(n==t)return!0;n=p(n)}return!1}function p(t){var e=t.parentNode;return e&&11==e.nodeType&&e.host?e.host:e}if("IntersectionObserver"in t&&"IntersectionObserverEntry"in t&&"intersectionRatio"in t.IntersectionObserverEntry.prototype)return void("isIntersecting"in t.IntersectionObserverEntry.prototype||Object.defineProperty(t.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}}));var f=[];i.prototype.THROTTLE_TIMEOUT=100,i.prototype.POLL_INTERVAL=null,i.prototype.observe=function(t){var e=this._observationTargets.some(function(e){return e.element==t});if(!e){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(),this._checkForIntersections()}},i.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t}),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},i.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},i.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},i.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||0>t||t>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},i.prototype._parseRootMargin=function(t){var e=t||"0px",n=e.split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return n[1]=n[1]||n[0],n[2]=n[2]||n[0],n[3]=n[3]||n[1],n},i.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(s(t,"resize",this._checkForIntersections,!0),s(e,"scroll",this._checkForIntersections,!0),"MutationObserver"in t&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},i.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,h(t,"resize",this._checkForIntersections,!0),h(e,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},i.prototype._checkForIntersections=function(){var t=this._rootIsInDom(),e=t?this._getRootRect():a();this._observationTargets.forEach(function(i){var r=i.element,s=u(r),h=this._rootContainsTarget(r),c=i.entry,a=t&&h&&this._computeTargetAndRootIntersection(r,e),l=i.entry=new n({time:o(),target:r,boundingClientRect:s,rootBounds:e,intersectionRect:a});c?t&&h?this._hasCrossedThreshold(c,l)&&this._queuedEntries.push(l):c&&c.isIntersecting&&this._queuedEntries.push(l):this._queuedEntries.push(l)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},i.prototype._computeTargetAndRootIntersection=function(n,i){if("none"!=t.getComputedStyle(n).display){for(var o=u(n),r=o,s=p(n),h=!1;!h;){var a=null,l=1==s.nodeType?t.getComputedStyle(s):{};if("none"==l.display)return;if(s==this.root||s==e?(h=!0,a=i):s!=e.body&&s!=e.documentElement&&"visible"!=l.overflow&&(a=u(s)),a&&(r=c(a,r),!r))break;s=p(s)}return r}},i.prototype._getRootRect=function(){var t;if(this.root)t=u(this.root);else{var n=e.documentElement,i=e.body;t={top:0,left:0,right:n.clientWidth||i.clientWidth,width:n.clientWidth||i.clientWidth,bottom:n.clientHeight||i.clientHeight,height:n.clientHeight||i.clientHeight}}return this._expandRectByRootMargin(t)},i.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100}),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},i.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,i=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==i)for(var o=0;o<this.thresholds.length;o++){var r=this.thresholds[o];if(r==n||r==i||n>r!=i>r)return!0}},i.prototype._rootIsInDom=function(){return!this.root||l(e,this.root)},i.prototype._rootContainsTarget=function(t){return l(this.root||e,t)},i.prototype._registerInstance=function(){f.indexOf(this)<0&&f.push(this)},i.prototype._unregisterInstance=function(){var t=f.indexOf(this);-1!=t&&f.splice(t,1)},t.IntersectionObserver=i,t.IntersectionObserverEntry=n}(window,document);

/* Helpers */

function dragElement(el, events) {

function getPointer(e) {
var x = 'clientX';
var y = 'clientY';
var evt = e.touches ? e.touches[0] : e;
return { x: evt[x], y: evt[y] };
}

var drag = { x: 0, y: 0, deltaX: 0, deltaY: 0, active: true, events: events || {} };
var originalX = 0;
var originalY = 0;
var pointerX = 0;
var pointerY = 0;

function move(e) {
if (drag.active) return;
drag.deltaX = pointerX - getPointer(e).x;
drag.deltaY = pointerY - getPointer(e).y;
drag.x = originalX - drag.deltaX;
drag.y = originalY - drag.deltaY;
if (drag.events.move) drag.events.move(drag);
}

function release(e) {
drag.active = true;
if (drag.events.release) drag.events.release(drag);
document.removeEventListener('mousemove', move, false);
document.removeEventListener('mouseup', release, false);
document.removeEventListener('touchmove', move, false);
document.removeEventListener('touchend', release, false);
}

function start(e) {
if (!drag.active) return;
e.preventDefault();
drag.active = false;
pointerX = getPointer(e).x;
pointerY = getPointer(e).y;
originalX = drag.x;
originalY = drag.y;
if (drag.events.begin) drag.events.begin(drag);
document.addEventListener('mousemove', move, false);
document.addEventListener('mouseup', release, false);
document.addEventListener('touchmove', move, false);
document.addEventListener('touchend', release, false);
}

el.addEventListener('mousedown', start, false);
el.addEventListener('touchstart', start, false);

return drag;

}

// Better scroll events

function onScroll(cb) {
var isTicking = false;
var scrollY = 0;
var body = document.body;
var html = document.documentElement;
var scrollHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
function scroll() {
scrollY = window.scrollY;
if (cb) cb(scrollY, scrollHeight);
requestTick();
}
function requestTick() {
if (!isTicking) requestAnimationFrame(updateScroll);
isTicking = true;
}
function updateScroll() {
isTicking = false;
var currentScrollY = scrollY;
}
scroll();
window.onscroll = scroll;
}

// Scroll to element

function scrollToElement(el, offset) {
var off = offset || 0;
var rect = el.getBoundingClientRect();
var top = rect.top + off;
var animation = anime({
targets: [document.body, document.documentElement],
scrollTop: '+='+top,
easing: 'easeInOutSine',
duration: 1500
});
// onScroll(animation.pause);
}

// Check if element is in viewport

function isElementInViewport(el, inCB, outCB, rootMargin) {
var margin = rootMargin || '-10%';
function handleIntersect(entries, observer) {
var entry = entries[0];
if (entry.isIntersecting) {
if (inCB && typeof inCB === 'function') inCB(el, entry);
} else {
if (outCB && typeof outCB === 'function') outCB(el, entry);
}
}
var observer = new IntersectionObserver(handleIntersect, {rootMargin: margin});
observer.observe(el);
}

function fitElementToParent(el, padding, exception) {
let windowWidth = 0;
let timeout = 0;
function resize() {
anime.set(el, {scale: 1});
if (exception) anime.set(exception, {scale: 1});
var pad = padding || 0;
var parentEl = el.parentNode;
var elOffsetWidth = el.offsetWidth - pad;
var parentOffsetWidth = parentEl.offsetWidth;
var ratio = parentOffsetWidth / elOffsetWidth;
var invertedRatio = elOffsetWidth / parentOffsetWidth;
anime.set(el, {scale: ratio});
if (exception) anime.set(exception, {scale: invertedRatio});
}
resize();
window.addEventListener('resize', function() {
if (window.innerWidth === windowWidth) return;
clearTimeout(timeout);
timeout = setTimeout(function() {
windowWidth = window.innerWidth;
resize();
}, 15);
});
}
</syntaxhighlight>

Anime.js

2021-01-17T07:33:33Z

84.157.18.194:

Anime.js

2021-01-17T07:08:50Z

84.157.18.194: /* Morphing SVG */

Anime.js

2021-01-17T07:07:23Z

84.157.18.194: /* Morphing SVG */

Anime.js

2021-01-17T07:06:49Z

84.157.18.194: /* Morphing SVG */

Anime.js

2021-01-17T07:05:01Z

84.157.18.194:

PrivacyWire - ProcessWire Modul

2021-01-12T19:45:26Z

84.157.18.194: /* CSS */

Modul zum Anzeigen eines Cookie Banners und zum Blockieren von Skripten, Externen Medien etc. Das Modul passt das HTML an
== Links ==
https://processwire.com/modules/privacy-wire/
https://processwire.com/talk/topic/23118-privacywire-cookie-management-async-external-asset-loading/

== Quickstart ==
* Modul installieren
* Labels übersetzen
* Benötigte Ketegorien auswählen
** Zuordnung der Kategorien funktioniert über data-category Attribut.
* Skripte anpassen z.B.
** Normale Skripte: type="text/plain" data-type="text/javascript" data-category="marketing"
** Externe Skripte: data-src="..."
Beispiele:
<script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"> </script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script>

== Cookie Options anzeigen ==
<pre>
[[privacywire-choose-cookies]] - Mit Textformatter

<a href="#" class="privacywire-show-options">Show Cookie Options</a>
<button class="privacywire-show-options">Show Cookie Options</button>
</pre>

== CSS ==
<syntaxhighlight lang="css">
.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{
background-color: #009999 !important;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
color: #fff !important;
}
</syntaxhighlight>

== Video Embed Opt-In==
Im VideoEmbed Plugin kann man die Kategorie auswählen (z.B. external Media)