Add "pulse" to screenshots to indicate interactivity

css/carousel.css

@@ -23,6 +23,7 @@
   left: calc(-100% + 15px);
   bottom: 15px;
 }
+
 .screenshot:nth-child(1) {
   z-index: 2;
   left: 30px;
@@ -70,3 +71,18 @@ with different numbers of slides
     scale: 1.0;
   }
 }
+
+@keyframes pulse {
+  25% {
+    scale: 1.05
+  }
+  50% {
+    scale: 1.00
+  }
+  75% {
+    scale: 0.95
+  }
+  100% {
+    scale: 1.00
+  }
+}

scripts/carousel.js

@@ -1,4 +1,4 @@
-let timing = 250;
+let swapTiming = 250;
 let stacks = document.getElementsByClassName('stack');
 
 for (let i = 0; i < stacks.length; i++) {
@@ -12,15 +12,32 @@ for (let i = 0; i < stacks.length; i++) {
 function swap(e) {
     let thisTarget = e.target
     if (!thisTarget.classList.contains('screenshot')) return;
-    thisTarget.style.animation = `fade-out ${timing}ms ease-in forwards`;
+    thisTarget.style.animation = `fade-out ${swapTiming}ms ease-in forwards`;
 
     setTimeout(() => {
-        thisTarget.style.animation = `fade-in ${timing}ms ease-out forwards`;
+        thisTarget.style.animation = `fade-in ${swapTiming}ms ease-out forwards`;
         this.prepend(thisTarget);
-    }, timing);
+    }, swapTiming);
 
     setTimeout(() => {
         // this.prepend(thisTarget);
         thisTarget.style = '';
-    }, 2*timing);
+    }, 2*swapTiming);
+}
+
+window.addEventListener('scroll', pulseFeatures);
+function pulseFeatures() {
+    let features = document.getElementById('features');
+    let featuresRect = features.getBoundingClientRect()
+    let stacks = document.getElementsByClassName('stack');
+    let screenshots = document.getElementsByClassName('screenshot');
+    let pulseTiming = 500;
+    let pulseDelay = 50;
+    
+    if (window.scrollY > featuresRect.y + featuresRect.height/3) {
+        for (let i = 0; i < screenshots.length; i++) {
+            screenshots[i].style.animation = `pulse ${pulseTiming}ms ease-in-out ${pulseDelay*i}ms forwards`;
+        }
+        window.removeEventListener('scroll', pulseFeatures);
+    }
 }