JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<button id="play">
Play
</button>

<div class="layers -off">

  <div class="layer bg l1">
    <div class="layer-content">
      <img src="http://lorempixel.com/600/600" />
    </div>
  </div>
    
  <div class="layer flex-bottom l2">
    <div class="layer-content">
  
      <hr class="divider">
      <h2 class="title">Habitasse adipiscing ad eu elementum lobortis a bibendum convallis vestibulum per.</h2>
      <div class="source">
        <img src="http://lorempixel.com/24/24" />
        <span>Lobortis Bibendum</span>
      </div>
    </div>
    
  </div>

</div>

CSS

.layers {
  position:relative;
  width: 400px;
  height: 600px;
  margin: auto;
  overflow: hidden;
  border: 1px solid #000;
}

.layer {
  position: absolute;
  left:0;
  right:0
  width: 100%;
  height: 100%;
  display: flex;
}

.flex-bottom {
      align-items: flex-end;
}
.l2 .layer-content {
  position: relative;
}

.l2 .layer-content::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  bottom: -500px;
  background: rgba(0, 0, 0, 0.8);
  transform: skewY(3deg);
  transform-origin: top right;
  z-index:-1;
}

.divider {
  height: 2px;
  border:0px;
  background: #Fff;
  width: 55px;
  margin: 0;
}

.title {
  font-family: sans-serif;
  color: #FFF;
}

.layer.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l2 .layer-content {
  padding: 16px;
}


/* Animations */
.divider {
  width: 55px;
  transition: width 0.5s 0.75s ease-in-out;
}

.source * {
  color: #fff;
  font-family: sans-serif;
  font-size: 11px;
  display: inline-block;
  vertical-align: middle;
}

.l1 {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.5s 0s ease-in-out,
              opacity 0.25s 0.25s ease-in-out;
}

.l2 {
  transform: translateY(0%);
  opacity: 1;
  transition:
    transform 0.75s 0s ease-in-out,
    opacity 0.5s 0.25s ease-in-out;
}

.layers.-off .divider {
  width: 0px;
  transition: none;
}
.layers.-off .l1 {
  transform: scale(0);
  opacity: 0;
  transition: none;
}
.layers.-off .l2 {
  opacity: 0;
  transform: translateY(100%);
  transition: none;
}

JavaScript

document.getElementById('play').addEventListener('click', (e) => {
  document.querySelector('.layers').classList.toggle('-off');
});

// Not real data.
var data = {
  layers: [
    {
      background: 'http://lorempixel.com/600/600',
      // Layer 1 transitions
      transitions: [
        {
          property: 'scale',
          start: 0,
          duration: 500,
          delay: 0,
          easing: 'ease-in-out',
        },
        {
          property: 'opacity',
          start: 0,
          duration: 250,
          delay: 250,
          easing: 'ease-in-out',
        }
      ],
    },
    {
      items: [
        {
          type: 'divider',
          width: 55,
          height: 2,
      		// Divider transitions
          transitions: [
            {
              property: 'width',
              start: 0,
              duration: 500,
              delay: 750,
              easing: 'ease-in-out',
            },
          ]
        },
        {
          text: 'Habitasse adipiscing ad eu elementum lobortis a bibendum convallis vestibulum'
        },
        {
        // source...
        }
      ],
      // Layer 2 transitions
      transitions: [
        {
          property: 'top',
          start: '100%',
          duration: 750,
          delay: 0,
          easing: 'ease-in-out',
        },
        {
          property: 'opacity',
          start: 0,
          duration: 500,
          delay: 250,
          easing: 'ease-in-out',
        }
      ],
    }
  ]

};