From 62fa67e9406203fc9e3ea3f9d914b8b15501be78 Mon Sep 17 00:00:00 2001
From: Plouzennec Benjamin <plouzennec.benjamin@gmail.com>
Date: Mon, 22 Jan 2018 11:56:15 +0100
Subject: [PATCH] :sparkles: filled blank for a great diff

---
 .../backgroundCircle/backgroundCircle.js      | 22 +++++++++++++-
 src/Parts/body/body.js                        | 30 ++++++++++++++++++-
 src/Parts/eye/eye.js                          | 20 ++++++++++++-
 src/Parts/hair/hair.js                        |  5 ++++
 src/Parts/horn/horn.js                        |  8 +++++
 src/Parts/tail/tail.js                        |  5 ++++
 src/index.js                                  | 15 ++++++++--
 7 files changed, 99 insertions(+), 6 deletions(-)

diff --git a/src/Parts/backgroundCircle/backgroundCircle.js b/src/Parts/backgroundCircle/backgroundCircle.js
index 4c1a6d7..0f2499c 100644
--- a/src/Parts/backgroundCircle/backgroundCircle.js
+++ b/src/Parts/backgroundCircle/backgroundCircle.js
@@ -1,4 +1,24 @@
-const svgNS = 'http://www.w3.org/2000/svg'
 /* START: Fill Here */
+import { styler, tween, action } from 'popmotion'
+const svgNS = 'http://www.w3.org/2000/svg'
+
+const mainSvg = document.getElementById('main-svg')
+const backgroundCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+mainSvg.prepend(backgroundCircle)
+
+const backgroundCircleStyler = styler(backgroundCircle)
+
+backgroundCircleStyler.set({
+  x: 100,
+  y: 100,
+  fill: 'darkcyan',
+})
+
+const animateBackground = tween({
+  from: { r: 0 },
+  to: { r: 100 },
+  duration: 500,
+})
 
+export default action(({ complete }) => animateBackground.start({ update: backgroundCircleStyler.set, complete }))
 /* END: Fill Here */
diff --git a/src/Parts/body/body.js b/src/Parts/body/body.js
index 059c579..a6193f5 100644
--- a/src/Parts/body/body.js
+++ b/src/Parts/body/body.js
@@ -9,8 +9,36 @@ subSvg.appendChild(bodyPath)
 
 const bodyStyler = styler(bodyPath);
 /* START: Fill Here */
+bodyPath.setAttribute('stroke-dasharray', '220')
+bodyPath.setAttribute('stroke-dashoffset', '220')
+bodyStyler.set({
+  opacity: 0,
+  d: path,
+  strokeWidth: .5,
+  stroke: 'white',
+  fill: 'white',
+  fillOpacity: 0,
+})
+
+
+const drawBody = tween({
+  from: { 'stroke-dashoffset': 220, opacity: 1 },
+  to: { 'stroke-dashoffset': 440 },
+  duration: 2000,
+})
+
+const fillBody = tween({
+  from: { fillOpacity: 0 },
+  to: { fillOpacity: 1 },
+  duration: 500,
+})
+
+const animateBody = chain(
+  drawBody,
+  fillBody
+)
 /* END: Fill Here */
 
 /* START: Update Here */
-export default action(({ complete }) => {})
+export default action(({ complete }) => animateBody.start({ update: bodyStyler.set, complete }))
 /* END: Update Here */
diff --git a/src/Parts/eye/eye.js b/src/Parts/eye/eye.js
index ea23daa..6ed213e 100644
--- a/src/Parts/eye/eye.js
+++ b/src/Parts/eye/eye.js
@@ -9,17 +9,35 @@ const eyeStyler = styler(eye);
 eyeStyler.set({
   opacity: 0,
   /* START: Fill Here */
+  fill: 'black',
+  r: 3,
+  x: 80,
+  y: 35,
   /* END: Fill Here */
 })
 
 const showEye = tween({
   /* START: Fill Here */
+  from: { scaleY: 0, opacity: 1 },
+  to: { scaleY: 1 },
+  duration: 200,
   /* END: Fill Here */
 })
 
 /* START: Fill Here */
+const blinkEye = tween({
+  from: { scaleY: 1 },
+  to: { scaleY: 0.1 },
+  duration: 50,
+  flip: 1,
+})
 /* END: Fill Here */
 
 /* START: Update Here */
-export default action(({ complete }) => showEye.start({ update: eyeStyler.set, complete }))
+export default action(({ complete }) => {
+  showEye.start({ update: eyeStyler.set, complete: () => {
+    complete()
+    setInterval(() => blinkEye.start({ update: eyeStyler.set }), 2000)
+  }})
+})
 /* END: Update Here */
diff --git a/src/Parts/hair/hair.js b/src/Parts/hair/hair.js
index 4305bc1..3f327eb 100644
--- a/src/Parts/hair/hair.js
+++ b/src/Parts/hair/hair.js
@@ -10,6 +10,7 @@ subSvg.appendChild(hair)
 const hairStyler = styler(hair);
 hairStyler.set({
   /* START: Fill Here */
+  fill: 'lavender',
   /* END: Fill Here */
   opacity: 0,
   d: path,
@@ -17,6 +18,10 @@ hairStyler.set({
 
 const animateHair = tween({
   /* START: Fill Here */
+  from: { y: -100, opacity: 1 },
+  to: { y: 0 },
+  duration: 500,
+  ease: easing.backOut,
   /* END: Fill Here */
 })
 
diff --git a/src/Parts/horn/horn.js b/src/Parts/horn/horn.js
index 58604f6..45f1f18 100644
--- a/src/Parts/horn/horn.js
+++ b/src/Parts/horn/horn.js
@@ -10,6 +10,7 @@ subSvg.appendChild(horn)
 const hornStyler = styler(horn);
 hornStyler.set({
   /* START: Fill Here */
+  fill: 'aquamarine',
   /* END: Fill Here */
   opacity: 0,
   d: path,
@@ -17,6 +18,13 @@ hornStyler.set({
 
 const animateHorn = tween({
   /* START: Fill Here */
+  from: {
+    x: -20,
+    y: 30,
+    opacity: 1,
+  },
+  to: { x: 0, y: 0 },
+  duration: 1000,
   /* END: Fill Here */
 })
 
diff --git a/src/Parts/tail/tail.js b/src/Parts/tail/tail.js
index 8f7042c..10f9f89 100644
--- a/src/Parts/tail/tail.js
+++ b/src/Parts/tail/tail.js
@@ -10,6 +10,7 @@ subSvg.appendChild(tail)
 const tailStyler = styler(tail);
 tailStyler.set({
   /* START: Fill Here */
+  fill: 'pink',
   /* END: Fill Here */
   opacity: 0,
   d: path,
@@ -17,6 +18,10 @@ tailStyler.set({
 
 const animateTail = tween({
   /* START: Fill Here */
+  from: { x: -100, opacity: 1 },
+  to: { x: 0 },
+  duration: 500,
+  ease: easing.backOut
   /* END: Fill Here */
 })
 
diff --git a/src/index.js b/src/index.js
index f385334..8df874b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,13 @@
-import { backgroundCircle } from './Parts'
+import { backgroundCircle, body, hair, tail, eye, horn } from './Parts'
+import { chain, composite } from 'popmotion'
 
-/* START: Fill Here */
-/* END: Fill Here */
+chain(
+  backgroundCircle,
+  body,
+  composite({
+    hair,
+    tail,
+  }),
+  eye,
+  horn,
+).start()