From 5b1a5be19623af5cd1c72a639a87da41d661b2d1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 10 Feb 2016 01:04:57 +0100
Subject: [PATCH] make Buffy wink

---
 _src/_assets/javascripts/page-community.js    | 15 ++++++
 _src/_assets/styles/page-community.scss       | 48 +++++++++++++------
 .../svg}/buffy-with-stage.svg                 |  9 ++--
 _src/community.html                           | 17 ++-----
 package.json                                  |  3 +-
 5 files changed, 60 insertions(+), 32 deletions(-)
 create mode 100644 _src/_assets/javascripts/page-community.js
 rename _src/{_assets/images => _includes/svg}/buffy-with-stage.svg (93%)

diff --git a/_src/_assets/javascripts/page-community.js b/_src/_assets/javascripts/page-community.js
new file mode 100644
index 0000000..8caefaf
--- /dev/null
+++ b/_src/_assets/javascripts/page-community.js
@@ -0,0 +1,15 @@
+
+//=include ../../../node_modules/is-in-viewport/lib/isInViewport.js
+
+jQuery(function($) {
+
+    // start Buffy animation when in viewport
+    var buffy = $('#buffy');
+
+    if (buffy.isInViewport() ) {
+        buffy.addClass('is-ready');
+    } else {
+        buffy.removeClass('is-ready');
+    }
+
+});
diff --git a/_src/_assets/styles/page-community.scss b/_src/_assets/styles/page-community.scss
index 6e9bde7..86b76f8 100644
--- a/_src/_assets/styles/page-community.scss
+++ b/_src/_assets/styles/page-community.scss
@@ -10,12 +10,8 @@
     }
 }
 
-.section-community,
-.section-conduct {
-    @extend .text-center;
-}
-
 .section-community {
+    @extend .text-center;
     position: relative;
     // make room for BuffyDB
     padding-bottom: 200px;
@@ -33,15 +29,6 @@
         margin-top: 0;
     }
 
-    .buffy {
-        @extend .img--responsive;
-        vertical-align: bottom;
-        height: 220px;
-        position: absolute;
-        bottom: 0;
-        right: 0;
-    }
-
     .social-link {
         &,
         .icon {
@@ -79,3 +66,36 @@
         }
     }
 }
+
+
+//
+// Buffy: positioned and animated
+//
+#buffy {
+    @extend .img--responsive;
+    vertical-align: bottom;
+    height: 220px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    #arm {
+        transform-origin: right;
+    }
+
+    &.is-ready {
+        #arm {
+            animation: buffy-wink 1s ease-in-out 3s;
+        }
+    }
+
+    &:hover #arm {
+        animation: buffy-wink 1s ease-in-out;
+    }
+}
+
+@keyframes buffy-wink {
+    0%   { transform: rotate(0); }
+    25%, 50%  { transform: rotate(-20deg); }
+    30%, 100% { transform: rotate(0); }
+}
diff --git a/_src/_assets/images/buffy-with-stage.svg b/_src/_includes/svg/buffy-with-stage.svg
similarity index 93%
rename from _src/_assets/images/buffy-with-stage.svg
rename to _src/_includes/svg/buffy-with-stage.svg
index ae9e3bd..4394f71 100644
--- a/_src/_assets/images/buffy-with-stage.svg
+++ b/_src/_includes/svg/buffy-with-stage.svg
@@ -1,4 +1,4 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1091.39 579.95">
+<svg id="buffy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1091.39 579.95">
   <defs>
     <style>
       .cls-1 {
@@ -46,8 +46,11 @@
   <path class="cls-1" d="M1091.39,595.28H276.5s0-579.95,810-579.95h4.89V595.28Z" transform="translate(0 -15.33)"/>
   <path class="cls-2" d="M0,595.28H1091.39V487C608.5,473,209.5,500,0,595.28Z" transform="translate(0 -15.33)"/>
   <g>
-    <path class="cls-3" d="M824.74,242.87C783,240.4,751.5,270.32,751.5,270.32l-37.75-34.76h-2.92l34.8,50s56.76-10.16,71.28-21.85c3.92-3.15,9.86-17.52,9.86-17.52S825.72,242.93,824.74,242.87Z" transform="translate(0 -15.33)"/>
-    <path class="cls-4" d="M712.25,238.56c1.12,0.3,2.42-.2,3.07-1.9a20.29,20.29,0,0,0,.66-11.27c-2.62-6-9.82-9.46-11.4-8-1.93,1.72,4,11,3.1,11.49l-4.24-7.2s-4.51,3.25.56,10.06C705.57,233.79,708.09,237.45,712.25,238.56Z" transform="translate(0 -15.33)"/>
+    <g id="arm">
+        <path class="cls-3" d="M824.74,242.87C783,240.4,751.5,270.32,751.5,270.32l-37.75-34.76h-2.92l34.8,50s56.76-10.16,71.28-21.85c3.92-3.15,9.86-17.52,9.86-17.52S825.72,242.93,824.74,242.87Z" transform="translate(0 -15.33)"/>
+        <path class="cls-4" d="M712.25,238.56c1.12,0.3,2.42-.2,3.07-1.9a20.29,20.29,0,0,0,.66-11.27c-2.62-6-9.82-9.46-11.4-8-1.93,1.72,4,11,3.1,11.49l-4.24-7.2s-4.51,3.25.56,10.06C705.57,233.79,708.09,237.45,712.25,238.56Z" transform="translate(0 -15.33)"/>
+    </g>
+
     <path class="cls-5" d="M855.76,427.48s-0.09.28-.17,0.62-0.22,1-.39,1.73-0.32,1.75-.41,2.88c-0.05.56-.13,1.16-0.17,1.8l-0.08,2c-0.05.7,0,1.44,0,2.2s0,1.55.09,2.36l0.23,2.5c0.06,0.86.26,1.71,0.39,2.59a50.2,50.2,0,0,0,1.18,5.39,25.91,25.91,0,0,0,.84,2.72L858.2,457c0.78,1.76,1.5,3.56,2.34,5.27s1.78,3.35,2.71,4.92l2.91,4.4c1,1.37,2,2.58,2.91,3.75l1.32,1.66c0.41,0.53.88,1,1.28,1.41l2.13,2.27,1.86,2-2-1.8-2.34-2.07c-0.44-.41-1-0.8-1.42-1.3L868.38,476c-1-1.09-2.18-2.22-3.3-3.51l-3.38-4.21c-1.1-1.52-2.14-3.16-3.25-4.8s-2-3.48-2.94-5.25l-1.23-2.77a28.33,28.33,0,0,1-1.15-2.79,54,54,0,0,1-1.79-5.62c-0.23-.93-0.53-1.83-0.68-2.75l-0.5-2.67c-0.19-.87-0.23-1.73-0.34-2.56s-0.21-1.63-.23-2.41l-0.11-2.23c0-.71,0-1.39,0-2,0-1.27.11-2.4,0.17-3.32s0.18-1.66.29-2.22l0.14-.77Z" transform="translate(0 -15.33)"/>
     <path class="cls-6" d="M880,487c-0.2-.12-6.78-0.26-8.55-1.8a4.24,4.24,0,1,1,5.56-6.41C878.74,480.28,880,487,880,487Z" transform="translate(0 -15.33)"/>
     <path class="cls-7" d="M814.17,151.72c-15.78,2.43-40.82-44.55-40.82-44.55s8.68,73.39,43.46,63.7C821.26,169.63,818.73,151,814.17,151.72Z" transform="translate(0 -15.33)"/>
diff --git a/_src/community.html b/_src/community.html
index c9099ba..6c0c301 100644
--- a/_src/community.html
+++ b/_src/community.html
@@ -2,6 +2,8 @@
 layout: page
 
 title: Community
+
+js: page-community.min.js
 ---
 
 <section class="section section-community">
@@ -54,18 +56,5 @@ title: Community
 
     </div>
 
-    <img class="buffy" src="/assets/img/buffy-with-stage.svg" alt="">
+    {% include svg/buffy-with-stage.svg %}
 </section>
-
-<!-- <section class="section section-contribute">
-    <div class="row">
-        <header class="section-header">
-            <h1 class="section-title">Community Guidelines</h1>
-            <p class="section-description">We’re happy you’re participating in this project and doing something big that's going to help the world. Thanks for abiding by our Community Guidelines.</p>
-        </header>
-
-        <p>
-
-        </p>
-    </div>
-</section> -->
diff --git a/package.json b/package.json
index 483f651..b84b8a1 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "normalize-opentype.css": ">=0.2.4",
     "parsleyjs": "^2.0.7",
     "svg4everybody": "^2.0.0",
-    "vivus": "^0.2.2"
+    "vivus": "^0.2.2",
+    "is-in-viewport": "^2.3.0"
   },
   "devDependencies": {
     "browser-sync": ">=2.10.0",