adding Show/Hide Player function

sdras#5
shershen08 · Mar 8, 2017 · 5fc38f7 · 5fc38f7
1 parent 46a9487
commit 5fc38f7
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/gsap-player.js b/src/gsap-player.js
@@ -134,6 +134,20 @@ function gsapPlayer(params) {
     'height': '15px',
     'fill'  :  iconColor, 
   });
+
+  //player box hiding/showing
+  var playerHideTimeOut = 1000;
+  var isOpacityTimerRunning = false;
+  var setPlayerTransparent = function(){
+    isOpacityTimerRunning = true;
+    setTimeout(function(){
+      if(isOpacityTimerRunning) player.style.opacity = 0;
+    }, playerHideTimeOut);
+  }
+  var setPlayerVisible = function(){
+    isOpacityTimerRunning = false;
+    player.style.opacity = '0.8';
+  }
 
   /*------------------------------------------
           timeline particulars
@@ -158,6 +172,9 @@ function gsapPlayer(params) {
   /*------------------------------------------
           event listeners
   -------------------------------------------*/
+
+  player.addEventListener('mouseleave', setPlayerTransparent);
+  player.addEventListener('mouseover', setPlayerVisible);
 
   slider.addEventListener('input', function() {
     this.setAttribute('value', this.value);