<section class="screen">
  <div class="content">
    <!-- [FS] NOTE: This is can be treated also as normal web page and containg normal content -->
  </div>
</section>

<button id="switcher-tv">Turn on/off</button>
$color-text: #e1eef6;
$color-link: #ff5f2e;
$color-link-hover: #fcbe32;
$black: #111111;

body {
  font-family: sans-serif;
  background-color: $black;
}

a {
  color: $color-link;
  
  &:hover {
    color: $color-link-hover;
  }
}

button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 20px;
  font-weight: 700;
  font-size: 16px;
}

h1 {
  text-align: center;
}

.screen {
  background-color: $color-text;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  content: " ";
  overflow: hidden;
  
    // Fallback for old browsers
  background: #16222A;

  background: -webkit-linear-gradient(to left, #16222A , #3A6073);
  background: linear-gradient(to left, #16222A , #3A6073);
  
  background-size: cover;
  
  background-image: url(https://cldup.com/gn3s3Fg75t.gif);
  
   color: $color-text;
}
View Compiled
(function() {
  var SELECTOR_SCREEN_ELEMENT = '.screen';
  var SELECTOR_SWITCHER_TV = '#switcher-tv';
  
  var isTurnedOn = true;
  
  var timeline;
  
  function buildTimeline() {
    timeline = new TimelineMax({
      paused: true
    });
    
    timeline
    .to(SELECTOR_SCREEN_ELEMENT, .2, {
      width: '100vw',
      height: '2px',
      background: '#ffffff',
      ease: Power2.easeOut
    })
    .to(SELECTOR_SCREEN_ELEMENT, .2, {
      width: '0',
      height: '0',
      background: '#ffffff'
    });
  }
  
  function toggleSwitcherTV() {
    if (isTurnedOn) {
      timeline.restart();
    }
    
    if (!isTurnedOn) {
      timeline.reverse();
    }
    
    isTurnedOn = !isTurnedOn;
  }
  
  // Initialize
  $(document).ready(buildTimeline);
  
  // Bindings
  $(document).on('click', SELECTOR_SWITCHER_TV, function() {
    toggleSwitcherTV();
  });
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js