const
  $overlay = $slider.find('.slider-halfscreen__overlay'),
  colors = [
    'linear-gradient(90deg, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%)', // slide 1
    'linear-gradient(90deg, rgba(0,255,0,0) 0%, rgba(0,255,0,1) 100%)', // slide 2
    'linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%)', // slide 3
  ];

// initial background overlay set for the 1st slide
TweenMax.set($overlay, {
  background: colors[0],
});

// slider change event
sliderImg.on('slideChange', function() {
  const currentSlide = this.realIndex; // current slide index

  // if the color for the current slide exists in array
  if (typeof colors[currentSlide] !== 'undefined') {
    TweenMax.to($overlay, 1.2, {
      background: colors[currentSlide],
      overwrite: 'all'
    });
  }
});