<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="reference"><a href="https://stripe.com/us/payments" target="_blank">REFERENCE</a></div>

<div class="container" onload="changePos()">
  <div class="banner">RECENT UPDATES</div>
  <ul class="ultra">
   
    <li class="tab-0">
      
      <strong>PAYMENTS</strong> <span class="date">JULY 9 </span></br>
<p>
Radar will now automatically allow any payment that is protected from being disputed for fraud due to a liability shift. For example, if the payment is verified by 3D Secure.</p>
    </li>
    <li class="tab-1">
      
      <strong>DASHBOARD</strong> <span class="date">JULY 9 </span></br>
<p>
Upgrade to version 2.0 of our iOS Dashboard app, which includes a new design, an updated home screen, and iPhone X support.</p>
         
    </li>
    <li class="tab-2"> 
      
      <strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Rules can now compare numerical metadata. For example, reviews could trigger if <strong><code>::customer_age:: < 21 </code></strong> (if you pass in custom metadata for a customer's age). </p>
      
    </li>
<li class="tab-3">
  <strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Upgrade to version 2.0 of our iOS Dashboard app, which includes a new design, an updated home screen, and iPhone X support.</p>
</li>
<li class="tab-4">
  <strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Radar will now automatically allow any payment that is protected from being disputed for fraud due to a liability shift. For example, if the payment is verified by 3D Secure.</p>
</li>

    </ul>
</div>
body{
  font-family: 'Open Sans', sans-serif;
  color: #525f7f;
}

a{
  text-decoration:none;
}

p{
  margin: 0px;
  padding: 0px;
  line-height: 22px;
  font-weight: 400;
}

.reference a{
  background: #8787ff;
  display:inline-flex;
  padding: 10px 30px;
  color: white;
  border-radius: 100px;
  
}

.container p:not(:first-child){
  margin-top:10px
}

.container{
  font-size: 14px;
  margin: 0 auto;
  max-width:400px;
  position:relative;
  top: 50px;
  
  .banner{
    display:inline;
    position: absolute;
    color: white;
    line-height: 14px;
    padding: 8px 20px;
    border-radius: 100px;    
    background-color: #17d352;
    z-index: 100;
    top: -15px;
    left: 10px;
  }
  
}

.placeholder-1{
  position:relative;
  transform-origin: 50% 100%;
}

.container ul{
  position:relative;
  list-style:none;
}

.container ul li{
  padding: 35px;
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  transform-origin: 50% 100%;
  border-radius: 4px;
  
  .date{
    margin-left: 10px;
    color: #8898aa;
  }
  }


//Tweak the transition properties to make it smoother
.tab-0{
  transform: translateY(-50px) scale(1.07);
  opacity:0;
  z-index:90;
  filter:blur(10px);
  transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96);
}

.tab-1{
  opcaity: 1;
  background-color: #fff;
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
  z-index:80;
  transform: scale(1);
  transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96) 100ms;
}

.tab-2{
  transform:translateY(5px) scale(0.9);
  opacity: 1;
  z-index: 70; 
  background: #e2e7ed;
  color:#e2e7ed;
  transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96) 200ms;
}

.tab-3{
  transform:translateY(55px) scale(0.8);
  opacity: .5;
  z-index: 60; 
  background: #e2e7ed;
  color:#e2e7ed;
  transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96) 300ms;
// transition: all 1s cubic-bezier(0.71, 0.01, 0.16, 1) 600ms;
}


.tab-4{
  transform:translateY(50px) scale(0.7);
  opacity: 0;
  z-index: 50; 
  background: grey;
  color:grey;
  transition: all 1s cubic-bezier(0.19, 0.49, 0.46, 0.96) 400ms;
}
View Compiled
/*Struggling to find the right bezier.
Help me figure it out.
Hot points in css(fiddle with css there)*/

setInterval(changePos,5000)

function changePos(){
  var x = document.getElementsByClassName("ultra")[0].childNodes;
  x = Array.from(x)
   
  // console.log(x);
  for(var i=1; i<x.length;i+=2){  
    if(x[i].classList.contains("tab-0")){
      x[i].classList.remove("tab-0");
      x[i].classList.add("tab-4");
    }
    else if(x[i].classList.contains("tab-1")){
      x[i].classList.remove("tab-1");
      x[i].classList.add("tab-0");
 
    }
    else if(x[i].classList.contains("tab-2")){
      x[i].classList.remove("tab-2");
      x[i].classList.add("tab-1");
      
    }
    else if(x[i].classList.contains("tab-3")){
      x[i].classList.remove("tab-3");
      x[i].classList.add("tab-2");
      
    }
    else if(x[i].classList.contains("tab-4")){
      x[i].classList.remove("tab-4");
      x[i].classList.add("tab-3");
    }
  }
  
  let y = x.filter((a)=> {
    return a.className !== undefined;
  })
  
  console.log(y)
  let z = findValue(y,"tab-1");
  
  function findValue(arr, str){
    for(let i=0; i <arr.length ;i++){
      if(arr[i].className === str){
        return arr[i].offsetHeight;
      }
    }
  }
  
  y.forEach((a)=>{
    if(a.className==="tab-1"){
      a.style.transform = `scale(1.0)`
    } else if (a.className === "tab-2"){
      a.style.transform = `translateY(${z-a.offsetHeight+30}px) scale(0.9)`
    } else if (a.className === "tab-3"){
      a.style.transform = `translateY(${z-a.offsetHeight+60}px) scale(0.8)`
    } else if (a.className === "tab-4"){
      a.style.transform = `translateY(${z-a.offsetHeight+100}px) scale(0.7)`
    } else if (a.className === "tab-0"){
      a.style.transform = `translateY(${z-a.offsetHeight-90}px) scale(1.08)`
    } 
  })
  
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.