@keyframers 1.4.0 | Expanding Environments

index.html

<a href="https://youtu.be/YjiHf3RE4o4" target="_blank" data-keyframers-credit style="color: #FFF; text-shadow: 0 1px 0px #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div id="site">
  <h1 class="heading">Keyframers</h1>
  
  <section class="articles">
    
    <article class="article">
      <div class="inner">
        <img src="https://images.unsplash.com/photo-1508114192106-671e913c2413?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d8f29c9fe7b6bef5850b8772f74c341f&auto=format&fit=crop&w=934&q=80" alt="">
        
        <p class="article-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium nam?</p>
      </div>
    </article>
    
    <div class="article">
      <div class="inner">
        <img src="https://images.unsplash.com/photo-1467155679845-414db2d0bdad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2cf93081e7cd08f4146588a8070e4147&auto=format&fit=crop&w=1300&q=80" alt="">
        
        <p class="article-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium nam?</p>
        
      </div>
    </div>
    <div class="article">
      <div class="inner">
        <img src="https://picsum.photos/1000/900?image=1067" alt="">
        <p class="article-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium nam?</p>
      </div>
    </div>
    <div class="article">
      <div class="inner">
        <img src="https://images.unsplash.com/photo-1518177456875-bf45a6c0b121?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=410523cf02cf97c0cca9a9ee7b02260d&auto=format&fit=crop&w=1400&q=60" alt="">
        <p class="article-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium nam?</p>
      </div>
    </div>
  </section>
  
  <main class="content">
    <h1 class="heading">Reimagining Animations</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, quam! Animi voluptatem facilis distinctio obcaecati asperiores eius fugiat debitis ex, earum voluptas accusantium.</p>
  </main>
  
</div>

keyframers-1-4-0-expanding-environments.markdown

@keyframers 1.4.0 | Expanding Environments

David and Stephen slide some more layers in this week's @keyframers stream, Expanding Environments.

Watch them code this live: https://youtu.be/YjiHf3RE4o4

Animation inspiration: https://dribbble.com/shots/4506212-S-I-B-A-R

A Pen by Shaw on CodePen.

License.

script.babel

console.clear();

const articles = document.querySelector('.articles');

Array.from(
  document.querySelectorAll('.article'), 
  (article, i) => {
    article.addEventListener('click', () => {
      articles.classList.toggle('full');
      article.classList.toggle('full');
    });
  });

style.scss

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

.heading {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

.articles {
  width: 100%;
  height: 80%;
  overflow: hidden;
  counter-reset: section; 
}

.article {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: 
    transform 1s cubic-bezier(.2, 0, .2, 1), 
    z-index 0.1s linear 1s;
  z-index: 1;
  visibility: hidden;

  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      --i: #{$i};
    }
  }

  transform: translateX( calc(25% * (var(--i) - 1) ));

  .inner {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-75%);
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: inherit;
    visibility: visible;
    
    display: flex;
    flex-direction: column;
  }

  img {
    display: block;
    width: 100%;
    height: 80%;
    flex: 0;
    object-fit: cover;
    transition: inherit;
    transform: translateX(25%) scale(1.25);
    transform-origin: center bottom;
    position: relative;
    z-index: 2;
  }

  .article-content {
    display: block;
    flex: 0 0 auto;
    width: 25%;
    transform: translateX(300%);
    padding: 0.75em;
    font-size: 0.7rem;
    
    display: flex;
    align-items: flex-start;

    &::before {
      display: block;
      counter-increment: section;      
      content: '0' counter(section); 
      font-size: 3rem;
      line-height: 1;
      margin-right: 0.2em;
      border-bottom: solid 0.1em;
    }

    transition: 
      transform 1s cubic-bezier(.2, 0, .2, 1), 
      opacity 0.3s linear;
  }
}

.content {
  position: absolute;
  bottom: 1em;
  left: 0;
  right: 0;
  padding: inherit;
  transition:
    opacity 0.5s ease-in-out,
    transform 0.5s cubic-bezier(.2, 0, .2, 1);
  opacity: 0;
  transform: translateY(60%);
  
  h1 { margin-bottom: 0.2em; }
}

.articles.full {

  .article {  
    transform: translateX(-25%);

    .article-content {
      opacity: 0;
    }
  }

  // shift articles AFTER the full one to the right
  // based on their position
  .article.full ~ .article {
    transform: translateX(100%);
  }

  .article.full {
    transform: translateX(0);
    transition-delay: 0s, 0s;
    z-index: 999;

    .inner,
    img {
      transform: translateX(0); 
    }

  }

  + .content {
    opacity: 1;
    transition-delay: 0.5s;
    transform: none;
  }
}

// Setup ------------------------

*, *:before, *:after {
  position: relative;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Abril Fatface', serif;
  color: #0F0F0F;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #325499;
}

#site {
  width: 90vw;
  height: 80vh;
  background-color: #fff;
  box-shadow: 0 5vw 10vw rgba(black, 0.15);
  padding: 0 4vw;
  overflow: hidden;
}