Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>Anchor + scroll animation test</h1>
  <div class="scroller">
    <p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
    <p class="target">This is the anchor</p>
    <p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
    <div class="target moving">This anchor moves</div>
    <p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
  </div>
  <div class="popup" id="animated">
    <div class="child"></div>
  </div>
  <div class="popup" id="moving-target">
  </div>
</body>
</html>
 
.scroller {
  height: 500px;
  overflow: auto;
}
.target {
  anchor-name: --target;
}
@keyframes slide-up {
  0% {
    top: 0;
  }
  100% {
    top: -600px;
  }
}
.target.moving {
  position: relative;
  anchor-name: --moving;
  animation: slide-up linear;
  animation-timeline: scroll();
}
@keyframes radius {
  0% { border-radius: 0;}
  100% { border-radius: 50%;}
}
.popup {
  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: white;
  animation: radius linear;
  animation-timeline: view();
  box-sizing: border-box;
  background: #aaf;
}
#animated {
  position-anchor: --target;
}
#moving-target {
  position-anchor: --moving;
  background: #afa;
}
@keyframes slide {
  0% {
    left: 0%;
  }
  100% {
    left: calc(100% - 20px);
  }
}
.child {
  position: absolute;
  top: calc(50% - 10px);
  border: 1px solid black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: 0;
  box-sizing: border-box;
  animation: slide linear;
  animation-timeline: view();
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
flackrpro
0viewers