synthing

commit fd801b37a8c390941245cc94d95c80041904f1f8
parent 195181089d748c83957b521734ed0cdde1d76c2a
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Tue, 20 Mar 2018 18:27:21 -0700

Total waveform wiggles if playing

Diffstat:
M
src/App/index.js
 | 
10
++++++----
M
src/index.css
 | 
24
+++++++++++++++++++++---

2 files changed, 27 insertions(+), 7 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -131,10 +131,12 @@ class App extends Component {
             >
                 <div>
                     <h1 id="synthing-title"> synthing </h1>
-                    <div class="total-wave">
-                       <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
-                       <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
-                       <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
+                    <div class="wave-scroller">
+                        <div class={`total-wave${this.props.playing ? ' -move' : ''}`}>
+                            <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
+                            <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
+                            <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
+                        </div>
                     </div>
                 </div>
                 <WaveEditor
diff --git a/src/index.css b/src/index.css
@@ -87,18 +87,36 @@ h1 {
     align-self: right;
 }
 
+.total-wave * {
+    background: none !important;
+}
+
 .total-wave {
+    width: 800px;
+    display: inline-flex;
+}
+.total-wave.-move {
+    animation: wiggle linear 1s infinite;
+}
+
+.wave-scroller {
+    display: inline-flex;
+    height: 50px;
+    width: 200px;
+    overflow: hidden;
     position: absolute;
     top: 15px;
-    right: 50px
+    right: 50px;
+    border-left: solid 1px rgba(0,0,0,0.1);
+    border-right: solid 1px rgba(0,0,0,0.1);
 }
 
 @keyframes wiggle {
     from {
-        margin-left: -200px;
+        margin-left: -100px;
     }
     to {
-        margin-left: -100px;
+        margin-left: 0px;
     }
 }