Payment Picker | @keyframers 1.14.0

index.html

<div id="app" data-state="wallet">
  <header class="ui-header">

  </header>
  <div class="ui-wallet">
    <h2 class="ui-wallet-heading">
      Wallet
    </h2>
    <div class="ui-cards">
      <div class="ui-card" data-card="AnimEx">
        <div class="ui-card-title">AnimEx</div>
        <div class="ui-card-type">Credit</div>
        <div class="ui-card-number">
          .... 8675
        </div>
      </div>
      <div class="ui-card" data-card="Easea">
        <div class="ui-card-title">Easea</div>
        <div class="ui-card-type">Prepaid</div>
        <div class="ui-card-number">
          .... 3099
        </div>
      </div>
      <div class="ui-card" data-card="Keyframers">
        <div class="ui-card-title">KeyFramers</div>
        <div class="ui-card-type">Debit</div>
        <div class="ui-card-number">
          .... 8571
        </div>
      </div>
    </div>
  </div>
  <div class="ui-expenses">
    <div class="ui-expense">
      <div class="ui-expense-timeframe">This month</div>
      <div class="ui-expense-price">$1245</div>
    </div>
  </div>
  <div class="ui-bottom">
    <!-- Layer -->
    <div class="ui-transactions">
      <table class="ui-table" style="--total: 5">
        <thead>
          <tr class="state-wallet-hidden" style="--i: 0">
            <th class="ui-icon"></th>
            <th class="ui-day">Today</th>
            <th class="ui-price">-$124</th>
          </tr>
        </thead>
        <tbody>
          <tr style="--i: 1">
            <td class="ui-icon">
              <div class="ui-item-icon">📍</div>
            </td>
            <td class="ui-day">
              <div class="ui-item-title">Animation Services</div>
              <small class="ui-item-time">18:20</small>
            </td>
            <td class="ui-price">
              -$60.00
            </td>
          </tr>
          <tr style="--i: 2">
            <td class="ui-icon">
              <div class="ui-item-icon">📍</div>
            </td>
            <td class="ui-day">
              <div class="ui-item-title">Animation Services</div>
              <small class="ui-item-time">18:20</small>
            </td>
            <td class="ui-price">
              -$60.00
            </td>
          </tr>
          <tr style="--i: 3">
            <td class="ui-icon">
              <div class="ui-item-icon">📍</div>
            </td>
            <td class="ui-day">
              <div class="ui-item-title">Animation Services</div>
              <small class="ui-item-time">18:20</small>
            </td>
            <td class="ui-price">
              -$60.00
            </td>
          </tr>
          <tr style="--i: 4">
            <td class="ui-icon">
              <div class="ui-item-icon">📍</div>
            </td>
            <td class="ui-day">
              <div class="ui-item-title">Animation Services</div>
              <small class="ui-item-time">18:20</small>
            </td>
            <td class="ui-price">
              -$60.00
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

payment-picker-keyframers-1-14-0.markdown

Payment Picker | @keyframers 1.14.0

A Pen by Shaw on CodePen.

License.

script.js

const elApp = document.querySelector('#app');

elApp.addEventListener('click', ()=>{
  let currentState = elApp.dataset.state;
  let nextState;
  
  switch (currentState) {
    case 'wallet': 
      nextState = 'card';
      break;
    case 'card':
    default: 
      nextState = 'wallet';
      break;
  }
  
  elApp.dataset.state = nextState;
});

style.scss

@import url('https://fonts.googleapis.com/css?family=Poppins:400:600');

//* { transition: all .3s ease-in-out; }

html {
  font-size: 56.5%;
}

#app {
  cursor: pointer;
  overflow: hidden;
  background: #FFF;
  height: 90vh;
  width: 50vh;
  display: grid;
  grid-template-columns: 5rem 1fr 2rem;
  grid-template-rows: 5rem 1fr 4rem 1.2fr;
  grid-row-gap: 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  border: 1px solid #CCC;
  border-radius: 3vh;
  box-shadow: 0 2rem 4rem rgba(black, 0.1);
  
  > .ui-header {
    grid-row: 1 / 2;
  }
  
  > .ui-wallet {
    grid-column: 2 / -1;
    grid-row: 2 / -1;
    z-index: 1;
  }
  
  > .ui-expenses {
    grid-column: 2 / -1;
    grid-row: 3 / 4;
  }
  
  > .ui-bottom {
    grid-column: 2 / -2;
    grid-row: 4 / 5;
    overflow-y: auto;
  }
}

.ui-expenses {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.ui-expense-price {
  font-size: 2.8rem;
}

/* ---------------------------------- */

.ui-cards {
  // 3d setup
  transform-style: preserve-3d;
  perspective: 1000px;
  perspective-origin: 100% 0%;
}

.ui-card {
  position: absolute;
  padding: 3rem;
  background: #EFCDCD;
  --light: #EFCDCD;
  --dark: #E5A9BB;
  background: linear-gradient(to bottom left, var(--light), var(--dark));
  border-radius: 2rem;
  color: #FFF;
  width: 120%;
  padding-bottom: 44%;
  
  ~ .ui-card {
    transform: translateY(-200%);
  }
}

.ui-card[data-card="AnimEx"] {
  --light: #838385;
  --dark: #454545;
}
.ui-card[data-card="Easea"] {
  --light: #6A9EF0;
  --dark: #{ darken(#567EDA, 15%) };
}

.ui-card-title {
  font-size: 2.8rem; 
}

.ui-card-type {
  opacity: 0.8;
}

.ui-card-number {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
}

/* ---------------------------------- */

.ui-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  
  thead { color: #aaa; font-size: 1.2rem; }
  
  th,
  td {
    padding: .5em .25em; 
  }
  
  .ui-item-title {
    font-weight: 600;
  }
  
  .ui-item-time {
    font-size: 1rem;
  }
}

th.ui-price {
  text-align: right;
}

th.ui-day {
  text-align-last: left;
}

td.ui-price {
  text-align: right;
  vertical-align: top;
}

/* ---------------------------------- */

.ui-wallet-heading,
.ui-cards,
.ui-card,
.ui-expenses,
.ui-bottom,
tr {
  transition: transform .6s ease, opacity .5s ease;
  transform: translateY(0%);
}

tr {
  transition-delay: calc( var(--i) * 50ms);
}

.ui-expenses {
  transition-duration: .5s;
}

.ui-wallet-heading {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: 3rem;
}

[data-state="card"] {
  .ui-wallet-heading {
    opacity: 0;
    transform: translateY(-10vh);
  }
}

[data-state="wallet"] {
  // All the choreography for the "wallet" state
  // goes here in this single area
  // because all the animations are related
  // to each other!
  
  .ui-card {
    @for $i from 1 through 3 {
      &:nth-child(#{$i}) {
        transform:
          translateY(10rem)
          rotateX(-40deg)
          translateZ($i * -10rem);
      }
    }
  }
  
  .ui-cards {
    transform: translateY(12rem);
  }
  
  .ui-expenses,
  .ui-bottom {
    transform: translateY(20vh);
  }
  
  .ui-expenses,
  .ui-bottom {
    opacity: 0;
  }
  
  tr {
    opacity: 0;
    transform: translateY(100%);  
    transition-delay: calc( (var(--total) - var(--i)) * 50ms);
  }

}


/* ---------------------------------- */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ddd;
  background: linear-gradient(to bottom left, #FEFEFE, #ddd);
  
  &:before, &:after {
    content: '';
    height: 70vmin;
    width: 70vmin;
    border-radius: 50%;
    position: absolute;
    background-image: linear-gradient(to right, #FBE4E7, #FBBECF);
    z-index: -1;
    opacity: 0.6;
  }
  
  &:before {
    left: 5vw;
    bottom: -15vw;
  }
  
  &:after {
    left: 30vw;
    bottom: -5vw;
    z-index: -3;
    opacity: 0.5;
    //background-image: linear-gradient(to left, #FBE4E7, #FBBECF);
  }
}

// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

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

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}