SVG Animations

SVG Animations

• 1.
  SVG ANIMATION B Y AD A M C H A M B E R S
• 2.
  SVG Basics Paths &Polylines CSS Animations JavaScript Animations Lottie & Bodymovin What we’ll cover today
• 3.
  3 To SVG ornot to SVG • CSS was made for layout, SVG was made for drawing • Accessibility. SVG is just DOM. • Debugging. Again just the DOM, Canvas is it’s own world • Performance limitations when animating hundreds of elements • 3D and extreme immersive experiences
• 4.
  4 SVG is likean infinite sheet of graph paper on which you can plot things You view pieces of this infinite graph paper through the viewbox
• 5.
  5
• 6.
  6
• 7.
  7
• 8.
  8
• 9.
  9 <svg width=“400px” height=“400px”>
• 10.
  1 0 <svg width=“400px”height=“400px” viewbox=“20 20 50 80”>
• 11.
  1 1
• 12.
  1 2
• 13.
  1 3
• 14.
  1 4
• 15.
  1 5
• 16.
  1 6
• 17.
  1 7
• 18.
  1 8 Drawing basicshapes view on codepen
• 19.
  1 9 Drawing polygonshapes view on codepen
• 20.
  2 0 Groups arelike divs, you can move and style of group of elements Elements inside a group inherit style, allowing for specificity, just like CSS
• 21.
  2 1 Group StyleSpecificity view on codepen
• 22.
  SVG Basics Paths &Polylines CSS Animations JavaScript Animations Lottie & Bodymovin What we’ll cover today
• 23.
  2 3 The pathis the most powerful element in the world of SVG shapes Paths create complex shapes by combining lines, curves, and arcs
• 24.
  2 4 Complex shapescomposed of only straight lines can be created as polylines Polylines and paths can create similar shapes but only paths can create curves
• 25.
  2 5 Drawing polylineshapes view on codepen
• 26.
  2 6 It isnot recommended to draw complex path shapes by hand However understanding path data will help in modifying and animating
• 27.
  2 7 Path data<path d=“” /> • Each command specified with a letter • Uppercase means absolute, lowercase means relative to last point • Move To: M x y • Line To: L x y • Horizontal To: H x • Vertical To: V y • Close Path: Z
• 28.
  2 8 Drawing paths viewon codepen
• 29.
  2 9 There arethree commands you can use to create smooth curves Two of those curves are Bezier curves, and the third is an arc or part of a circle
• 30.
  3 0 There arean infinite number of Bezier curves Two simple curves are available in path elements, Cubic and Quadratic
• 31.
  3 1 Jason Davies’Animated Bézier Curves
• 32.
  3 2 Drawing pathcurves <path d=“” /> • Cubic: C x1 y1, x2 y2, x y • Cubic Reflection: S x2 y2, x y • Quadratic: Q x1 y1, x y • Quadratic Reflection: T x y
• 33.
  3 3 Drawing quadraticcurves view on codepen
• 34.
  3 4 Drawing quadraticcurves view on codepen
• 35.
  3 5 Drawing quadraticcurves view on codepen
• 36.
  3 6 Drawing quadraticcurves view on codepen
• 37.
  SVG Basics Paths &Polylines CSS Animations JavaScript Animations Lottie & Bodymovin What we’ll cover today
• 38.
  3 8 view oncodepen
• 39.
  3 9 view oncodepen
• 40.
  4 0
• 41.
  4 1 view oncodepen
• 42.
  4 2
• 43.
  4 3 view oncodepen
• 44.
  4 4
• 45.
  4 5
• 46.
  4 6
• 47.
  4 7 easings.net
• 48.
  4 8
• 49.
  4 9 view oncodepen
• 50.
  5 0 view oncodepen
• 51.
  5 1
• 52.
  SVG Basics Paths &Polylines CSS Animations JavaScript Animations Lottie & Bodymovin What we’ll cover today
• 53.
  5 3 To JSor not to JS • Sequencing in CSS is hard • Real-time modification and editing animations • Cross browser differences paved over with JS libraries • Advanced animations made easy with JS library functionality • User interaction and third party data
• 54.
  5 4
• 55.
  5 5 view oncodepen
• 56.
  5 6
• 57.
  5 7
• 58.
  5 8 view oncodepen
• 59.
  5 9
• 60.
  SVG Basics Paths &Polylines CSS Animations JavaScript Animations Lottie & Bodymovin What we’ll cover today
• 61.
  6 1
• 62.
  6 2 view oncodepen
• 63.
  6 3
• 64.
  6 4 view oncodepen
• 65.
  6 5
• 66.
  Thank You 6 6