Animation im Web

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
GSAP
Scroll-Snap
Anime.js
http://imakewebthings.com/waypoints/guides/getting-started/
Lottie

Überblick

GSAP & ScrollMagic

ScrollMagic ist obsolet es gibt bei GSAP ein eigenes Plugin - ScrollTrigger

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)

<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>

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

(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);
}());