feat(Chevrons): Added spinning chevron

crisboarna · Dec 8, 2017 · 39b0c5a · 39b0c5a
1 parent 51eedeb
commit 39b0c5a
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 11 deletions.
diff --git a/src/demo/App.js b/src/demo/App.js
@@ -21,12 +21,16 @@ const App = () => (
       <a href="#s5"><ScrollElement type='chevron-sliding-fade-triple'/></a>
     </section>
     <section id="s5">
-      <h1>chevron-circle</h1>
-      <a href="#s6"><ScrollElement type='chevron-circle'/></a>
+      <h1>chevron-sliding-fade-spin</h1>
+      <a href="#s6"><ScrollElement type='chevron-sliding-fade-spin'/></a>
     </section>
     <section id="s6">
+      <h1>chevron-circle</h1>
+      <a href="#s7"><ScrollElement type='chevron-circle'/></a>
+    </section>
+    <section id="s7">
       <h1>chevron-circle-pulse</h1>
-      <a href="#s7"><ScrollElement type='chevron-circle-pulse'/></a>
+      <a href="#s8"><ScrollElement type='chevron-circle-pulse'/></a>
     </section>
   </div>
 );

diff --git a/src/demo/App.scss b/src/demo/App.scss
@@ -25,3 +25,4 @@ section h1 {
 #s4 { background: url(https://pre00.deviantart.net/f2d6/th/pre/i/2009/048/1/1/top_of_the_atmosphere_by_code_scythe.jpg) center center / cover no-repeat;}
 #s5 { background: url(https://img00.deviantart.net/6aff/i/2017/066/5/f/dusk_moment_by_bdrc-db1krmg.jpg) center center / cover no-repeat;}
 #s6 { background: url(https://pre00.deviantart.net/d269/th/pre/i/2016/186/7/e/autumn_liberty_reservoir_by_somadjinn-da8v0y6.jpg) center center / cover no-repeat;}
+#s7 { background: url(https://pre00.deviantart.net/bada/th/pre/i/2012/016/5/4/scenery_of_saturn_by_qaz2008-d4mmr9f.jpg) center center / cover no-repeat;}
diff --git a/src/lib/__tests__/components/ScrollElement.spec.js b/src/lib/__tests__/components/ScrollElement.spec.js
@@ -49,6 +49,11 @@ describe('ScrollElement', () => {
         expect(component).toMatchSnapshot();
       });
 
+      it('chevron sliding fade spin', () => {
+        component = shallow(<ScrollElement type = 'chevron-sliding-fade-spin'/>);
+        expect(component).toMatchSnapshot();
+      });
+
       it('chevron circle', () => {
         component = shallow(<ScrollElement type = 'chevron-circle'/>);
         expect(component).toMatchSnapshot();

diff --git a/src/lib/__tests__/components/__snapshots__/ScrollElement.spec.js.snap b/src/lib/__tests__/components/__snapshots__/ScrollElement.spec.js.snap
@@ -91,16 +91,35 @@ exports[`ScrollElement snapshots types chevron sliding fade 1`] = `
 </div>
 `;
 
+exports[`ScrollElement snapshots types chevron sliding fade spin 1`] = `
+<div
+  className="scroll-element"
+>
+  <div
+    className="scroll-element-chevron-sliding-fade-spin"
+  >
+    <span />
+    Scroll
+  </div>
+</div>
+`;
+
 exports[`ScrollElement snapshots types chevron sliding fade triple 1`] = `
 <div
   className="scroll-element"
 >
   <div
     className="scroll-element-chevron-sliding-fade-triple"
   >
-    <span />
-    <span />
-    <span />
+    <span
+      key="1"
+    />
+    <span
+      key="2"
+    />
+    <span
+      key="3"
+    />
     Scroll
   </div>
 </div>

diff --git a/src/lib/components/ScrollElement.js b/src/lib/components/ScrollElement.js
@@ -14,7 +14,7 @@ const ScrollElement = ({type, text} : Props) => {
       <div className={
         // $FlowFixMe: This type cannot be coerced to string
         `scroll-element-${type}`}>
-        {type === 'chevron-sliding-fade-triple' ? [<span></span>,<span></span>,<span></span>] : <span></span>}
+        {type === 'chevron-sliding-fade-triple' ? [<span key={1}></span>,<span key={2}></span>,<span key={3}></span>] : <span></span>}
         {text}
       </div>
     </div>

diff --git a/src/lib/components/ScrollElement.scss b/src/lib/components/ScrollElement.scss
@@ -135,8 +135,8 @@
   border-bottom: 1px solid #fff;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
-  -webkit-animation: sdb07 2s infinite;
-  animation: sdb07 2s infinite;
+  -webkit-animation: scroll-element-chevron-sliding-fade-triple 2s infinite;
+  animation: scroll-element-chevron-sliding-fade-triple 2s infinite;
   opacity: 0;
   box-sizing: border-box;
 }
@@ -154,7 +154,7 @@
   -webkit-animation-delay: .3s;
   animation-delay: .3s;
 }
-@-webkit-keyframes sdb07 {
+@-webkit-keyframes scroll-element-chevron-sliding-fade-triple {
   0% {
     opacity: 0;
   }
@@ -165,7 +165,7 @@
     opacity: 0;
   }
 }
-@keyframes sdb07 {
+@keyframes scroll-element-chevron-sliding-fade-triple {
   0% {
     opacity: 0;
   }
@@ -177,6 +177,51 @@
   }
 }
 
+.scroll-element-chevron-sliding-fade-spin {
+  padding-top: 70px;
+}
+.scroll-element-chevron-sliding-fade-spin span {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 24px;
+  height: 24px;
+  margin-left: -12px;
+  border-left: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  -webkit-transform: rotateZ(-45deg);
+  transform: rotateZ(-45deg);
+  -webkit-animation: scroll-element-chevron-sliding-fade-spin 1.5s infinite;
+  animation: scroll-element-chevron-sliding-fade-spin 1.5s infinite;
+  box-sizing: border-box;
+}
+@-webkit-keyframes scroll-element-chevron-sliding-fade-spin {
+  0% {
+    -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
+    opacity: 0;
+  }
+}
+@keyframes scroll-element-chevron-sliding-fade-spin {
+  0% {
+    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
+    opacity: 0;
+  }
+}
+
 .scroll-element-chevron-circle {
   padding-top: 60px;
 }