SVG Animation

WIEso SVG?

  • skalierbar
  • responsive
  • accessible
  • kleine Dateigröße
  • weniger HTTP requests
  • über CSS stylebar & animierbar

RECAP SVG Elements

 <circle 
    cx="100"
    cy="100"
    r="80"
    fill="#4e9a06" />
<ellipse 
    cx="170"
    cy="43"
    rx="27"
    ry="15" 
    fill="#73d216"
/>
<rect
    x="80"
    y="100"
    width="90"
    height="90" 
    fill="#204a87" />
<path 
    d="M 149,109 L 149,127 ... z"
    fill="#edd400" />
<polygon points="0,100 50,25 50,75 100,0" />

SVG ViewBOX 

 <svg viewBox="0 0 450 100">...</svg>
 svg { width: 450px; }


 <svg viewBox="0 0 450 100">...</svg>
 svg { width: 200px; }

SVG ViewBOX

SVG erstellen

  • Illustrator
  • Sketch
  • Inkscape
  • DrawSVG

 

  • export Optionen des Editors verwenden!

SVG Optimierung!

  • Artboard auf SVG Elemente anpassen
  • alle animierbaren Elemente auf ein eigenes Layer
  • File -> Export As benutzen
  • nach dem exportieren immer nochmal optimieren

SVG OPtimizing

SVGOMG

SVG COde

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65">
  <circle data-name="outer-fade" cx="32.5" cy="32.5" r="32.5" fill="#489ba9"/>
  <circle data-name="outer-fill" cx="32.5" cy="32.5" r="32.5" fill="#fff"/>
  <path data-name="outer-stroke" d="M32.5 2A30.5 30.5 0 1 1 2 32.5 30.5 30.5 0 0 1 32.5 2m0-2A32.5 32.5 0 1 0 65 32.5 32.5 32.5 0 0 0 32.5 0z" fill="#254355"/>
  <path data-name="center-star-fill" d="M22.1 46.9a.4.4 0 0 1-.4-.5l2-11.3-8.3-8.1a.4.4 0 0 1 .2-.6L27 24.7l5.2-10.4a.4.4 0 0 1 .6 0L38 24.7l11.4 1.7a.4.4 0 0 1 .2.6l-8.2 8 2 11.5a.3.3 0 0 1-.2.3.3.3 0 0 1-.4 0l-10.3-5.3-10.2 5.3a.3.3 0 0 1-.2 0z" fill="#3c3c3c"/>
  <path data-name="center-star-stroke" d="M22.1 46.9a.4.4 0 0 1-.4-.5l2-11.3-8.3-8.1a.4.4 0 0 1 .2-.6L27 24.7l5.2-10.4a.4.4 0 0 1 .6 0L38 24.7l11.4 1.7a.4.4 0 0 1 .2.6l-8.2 8 2 11.5a.3.3 0 0 1-.2.3.3.3 0 0 1-.4 0l-10.3-5.3-10.2 5.3a.3.3 0 0 1-.2 0zM18 27.3l7.1 7a.3.3 0 0 1 .1.3l-1.7 9.8 8.8-4.7a.4.4 0 0 1 .4 0l8.8 4.7-1.7-9.8a.3.3 0 0 1 0-.3l7.2-7-9.8-1.4a.3.3 0 0 1-.3-.2l-4.4-9-4.4 9a.3.3 0 0 1-.3.2z" fill="#3c3c3c"/>
  <path data-name="star-10" d="M19.4 19.5c-.3 0-.2-1-1-2s-2-.8-2-1 1.2-.3 2-1 .9-2 1.2-2 .2 1.1 1 2 2 .8 2 1.1-1.2.2-2 1-.9 2-1.2 2z" fill="#fd7865"/>
  <path data-name="star-9" d="M9.4 27.5c-.2 0-.1-.7-.6-1.3s-1.3-.5-1.3-.8.7-.1 1.3-.6.5-1.4.8-1.3.1.7.6 1.3 1.4.5 1.3.8-.7.1-1.3.6-.5 1.3-.8 1.3z" fill="#489ba9"/>
  <path data-name="star-8" d="M13.4 41.5c-.3 0-.2-1-1-2s-2-.8-2-1 1.2-.3 2-1 .9-2 1.2-2 .2 1.1 1 2 2 .8 2 1.1-1.2.2-2 1-.8 2-1.2 2z" fill="#fd7865"/>
  <path data-name="star-7" d="M18.4 53.5c-.2 0-.1-.7-.6-1.3s-1.4-.5-1.3-.8.7-.1 1.3-.6.5-1.3.8-1.3.1.7.6 1.3 1.3.5 1.3.8-.7.1-1.3.6-.5 1.3-.8 1.3z" fill="#fcc14c"/>
  <path data-name="star-6" d="M32.4 55.5c-.3 0-.2-1-1-2s-2-.8-2-1 1.2-.3 2-1 .9-2 1.2-2 .2 1.1 1 2 2 .8 2 1.1-1.2.2-2 1-.9 2-1.2 2z" fill="#489ba9"/>
  <path data-name="star-5" d="M46.4 52.5c-.2 0-.1-.7-.6-1.3s-1.3-.5-1.3-.8.7-.1 1.3-.6.5-1.3.8-1.3.1.7.6 1.3 1.3.5 1.3.8-.7.1-1.3.6-.5 1.3-.8 1.3z" fill="#fd7865"/>
  <path data-name="star-4" d="M52.4 40.5c-.3 0-.2-1-1-2s-2-.8-2-1 1.2-.3 2-1 .9-2 1.2-2 .2 1.1 1 2 2 .8 2 1.1-1.2.2-2 1-.8 2-1.2 2z" fill="#fcc14c"/>
  <path data-name="star-3" d="M56.4 26.5c-.2 0-.1-.7-.6-1.3s-1.3-.5-1.3-.8.7-.1 1.3-.6.5-1.4.8-1.3.1.7.6 1.3 1.3.5 1.3.8-.7.1-1.3.6-.5 1.3-.8 1.3z" fill="#fd7865"/>
  <path data-name="star-2" d="M43.4 19.5c-.3 0-.2-1-1-2s-2-.8-2-1 1.2-.3 2-1 .9-2 1.2-2 .2 1.1 1 2 2 .8 2 1.1-1.2.2-2 1-.9 2-1.2 2z" fill="#489ba9"/>
  <path data-name="star-1" d="M31.4 10.5c-.2 0-.1-.7-.6-1.3s-1.4-.5-1.3-.8.7-.1 1.3-.6.5-1.4.8-1.3.1.7.6 1.3 1.3.5 1.3.8-.7.1-1.3.6-.5 1.4-.8 1.3z" fill="#fcc14c"/>
</svg>

SVG + ANIMATION

SVG + CSS ANIMATION = 😖

CSS TRICKS ARTICLE

2 Optionen

  • Element aufsplitten auf mehrere SVGs
  • Greensocks GSAP Animation Library
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
  <ellipse cx="100" cy="50" rx="100" ry="50" />
  <rect x="0" y="0" width="100" height="100" />
</svg>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100" />
</svg>

GSAP

GSAP SYNTAX

TweenLite.to("div", 2, { 
    scaleY:0.75, scaleX:1.25, y:100, opacity:0.75, ease:Elastic.easeOut 
});

GSAP SYNTAX

TweenLite.to("div", 2, { 
    scaleY:0.75, scaleX:1.25, y:100, opacity:0.75, ease:Elastic.easeOut 
});

Element Selektor

Dauer der Animation

CSS Attribute die animiert werden

Easing

Ease Visualizer

EASINGS IN CSS & JS

STAGGER

TweenMax.staggerTo(".square", 2, {
    y:100, 
    backgroundColor:"#4f9d88", 
    ease:Elastic.easeOut
}, 0.05);

TIMEline

  • eine Art Animationssequenz
  • mehrere Animationen nacheinander abspielen
  • Animationen aufeinander abstimmen
  • Gruppieren von Animationen
  • gesamt Animationsequenz schneller oder langsamer machen

Timeline

const tl = new TimelineLite();

tl.to('.square--one', 1, { y: 100, ease: Back.easeOut })
  .to('.square--two', .8, { rotation: '30deg', backgroundColor: 'teal', ease: Elastic.easeOut })
  .to('.square--three', .5, { scale: 0.5, borderColor: '#2F3C4F', ease: Bounce.easeOut });

Timeline SYNTAX

const tl = new TimelineLite();

tl.set('.square--one', { y: -200 });

tl.to('.square--one', 1, { y: 100 })
  .to('.square--two', 0.8, { rotation: '30deg' })
  .to('.square--three', 0.5, { scale: 0.5 }, '-=0.4')
  .fromTo('.square--four', 0.5, { scale: 0 }, { scale: 0.5 }, '+=0.25')
  .to('.square--five', 0.5, { rotation: '120deg' }, { scale: 0.5 }, 0.2);

neue Timeline

startet wenn die vorige Animation fertig ist

setzt Elementstyling bevor Animation startet

startet 0.4s bevor die vorige Animation fertig ist

startet 0.25s nachdem die vorige Animation fertig war

startet 0.2s nach Beginn der Timeline

Better Timeline

function createPanel(panel) {
  var tl = new TimelineLite();
  tl.to(..)
    .to(..)
    .to(..);
    
  return tl; //very important that the timeline gets returned
}

const master = new TimelineLite();

master.add(createPanel(".panel1"))
  .add(createPanel(".panel2"))
  .add(createPanel(".panel3"));

CSS Tricks Article

Übung Teil 1

  • erstelle eine simple SVG Grafik mit mehreren Layern
  • exportiere die Grafik als SVG
  • optimiere die Datei mit SVGOMG und probiere die verschiedenen Einstellungen aus
  • speichere das optimierte SVG um es dann zu animieren

Übung Teil 2

  • animiere Teile der eigens exportierte SVG Datei mit GSAP oder animiere das unten erstellte Beispiel

bit.ly/fhs-svg

Übung Teil 2

TweenMax Docs

TweenMax.to(obj, 1, {x:100});
  • TweenMax.set()
  • TweenMax.to()
  • TweenMax.fromTo()
  • TweenMax.staggerTo()
  • TweenMax.staggerFromTo()
TweenMax.fromTo(element, 1, {x:0}, {x:100});

TweenMax.staggerTo(objects, 1, { y:"+=150", opacity:0 }, 0.2);
TweenMax.staggerFromTo(objects, 
                        1, 
                        {opacity:1}, 
                        {opacity:0}, 
                        0.2);
TweenMax.set(object, {x:100, y:50, opacity:0});

Ease Visualizer

Übung Beispiel

Andere SVG Libraries

SVG Animation

By Lisi Linhart

Made with Slides.com

SVG Animation

Short intro to SVG

  • 634

More from Lisi Linhart