Dynamic Island Animation

admin1234
Feb 06, 2026 6
Live Preview

Live Editor

<div class="phone">
  <div class="island" id="island">
    <div class="island-content">
      <div class="dot"></div>
      <span>Playing Music</span>
      <div class="bars">
        <span></span><span></span><span></span>
      </div>
    </div>
  </div>
</div>
body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#0f172a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto;
  padding-top:40px;
}

/* Phone */
.phone{
  width:360px;
  height:720px;
  background:#020617;
  border-radius:40px;
  position:relative;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  overflow:hidden;
}

/* Island */
.island{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:34px;
  background:#000;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:
    width .45s cubic-bezier(.4,0,.2,1),
    height .45s cubic-bezier(.4,0,.2,1),
    border-radius .45s ease;
}

/* Expanded */
.island.active{
  width:280px;
  height:90px;
  border-radius:32px;
}

/* Content */
.island-content{
  display:flex;
  align-items:center;
  gap:14px;
  opacity:0;
  transform:translateY(8px);
  transition:.3s ease;
  color:#fff;
  font-size:13px;
}

.island.active .island-content{
  opacity:1;
  transform:translateY(0);
}

/* Green dot */
.dot{
  width:10px;
  height:10px;
  background:#22c55e;
  border-radius:50%;
}

/* Music bars */
.bars{
  display:flex;
  gap:3px;
}
.bars span{
  width:3px;
  height:14px;
  background:#22c55e;
  border-radius:2px;
  animation: wave 1s infinite ease-in-out;
}
.bars span:nth-child(2){animation-delay:.1s}
.bars span:nth-child(3){animation-delay:.2s}

@keyframes wave{
  0%,100%{height:6px}
  50%{height:16px}
}
const island = document.getElementById('island');

function animateIsland(){
  island.classList.add('active');

  // stay expanded
  setTimeout(() => {
    island.classList.remove('active');
  }, 3000);
}

// initial delay
setTimeout(() => {
  animateIsland();
  // repeat every 6 seconds
  setInterval(animateIsland, 6000);
}, 1000);
Categories

Dynamic Island Animation

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
