Netflix animations

index.html

<div class="row">
<div class="tile" id="hoc">
  <div class="content">
    <div class="overlay">
      <h2>House of Cards</h2>
    </div>
  </div>
</div>
<div class="tile" id="breaking">
  <div class="content">
    <div class="overlay">
      <h2>Breaking Bad</h2>
    </div>
  </div>
</div>
<div class="tile" id="lost">
  <div class="content">
    <div class="overlay">
      <h2>Lost</h2>
    </div>
  </div>
</div>
<div class="tile" id="got">
  <div class="content">
    <div class="overlay">
      <h2>Game of Thrones</h2>
    </div>
  </div>
</div>
<div class="tile" id="freaks">
  <div class="content">
    <div class="overlay">
      <h2>Freaks and Geeks</h2>
    </div>
  </div>
</div>
</div>

Netflix animations.markdown

Netflix animations

Recreating Netflix's new css animations using opacity and transform.

A Pen by C-Rodg on CodePen.

License.

script.js

var rows = document.getElementsByClassName('row');
var tiles = rows[0].getElementsByClassName('tile');
var tileLength = tiles.length;

rows[0].addEventListener('mouseover', function(e){
  e.stopPropagation();
  e.preventDefault();
  var hoveredTile = e.target.closest('.tile');
  for(i=0; i<tileLength; i++){
    if(tiles[i] == hoveredTile){
      var tileIndex = i;
      break;
    }
   }
  
    for(i=0; i<tileIndex; i++){
      var tile = tiles[i];
      tile.classList.add('moveLeft');
    }
    for(i=tileIndex; i<tileLength; i++){
      var tile = tiles[i];
      tile.classList.add('moveRight');
    }
});

rows[0].addEventListener('mouseout', function(e){
  for(i=0; i < tileLength; i++){
    var tile = tiles[i];
    tile.classList.remove('moveRight');
    tile.classList.remove('moveLeft');
  }
});

style.css

html, body {
  box-sizing: border-box;
  background: #000;
}
.row {
  max-width: 1024px;
  margin: 20px auto;
}
.tile {
  width: 150px;
  height: 80px;
  background-color: #ccc;
  border: 1px solid #333;
  float: left;
  margin-right: 10px;
  position: relative;
  transition: 1s transform;
  transform-origin: top center;
  backface-visibility: hidden;
  cursor: pointer;
}

.content {
  width: 200%;
  height: 200%;
  transform: scale(0.5) translateZ(0px);
  transform-origin: top left;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(15, 15, 15, 0.7);
  opacity: 0;
  transition: opacity 1s;
  text-align: center;
}

.tile:hover .overlay {
  opacity: 1;
  transform: scale(1);
}

.overlay h2 {
  margin: 0;
  padding: 8px 0;
  background-color: rgba(0,0,0,0.6);
  color: #f5f5f5;
}

.tile:hover {
  transform: scale(2);
}

.moveRight {
  transform: translate3d(75px, 0, 0);
}
.moveLeft {
  transform: translate3d(-75px, 0, 0);
}

#lost {
  background: url(http://vignette2.wikia.nocookie.net/lostpedia/images/1/16/Lost-season1.jpg/revision/latest?cb=20070303221754);
  background-size: 100%;
}
#breaking {
  background: url(http://unspoiledpodcasts.com/wp-content/uploads/2014/09/Breaking-Bad.jpg);
  background-size: 100%;
}

#hoc {
  background: url(http://p1cdn05.thewrap.com/images/2015/02/house-of-cards-season-3-poster.jpg);
  background-size: 100%;
}

#got {
  background: url(http://img3.wikia.nocookie.net/__cb20120316191822/gameofthrones/images/e/e3/Season2CastEW.png);
  background-size: 100%;
}

#freaks {
  background: url(http://www.slate.com/content/dam/slate/articles/arts/culturebox/2014/05/140527_CBOX_FreaksGeeks.jpg.CROP.promo-mediumlarge.jpg);
  background-size: 100%;
}