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>Cyclic 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>
  <div class="popup" id="main">
  </div>
</body>
</html>
 
.scroller {
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
.target {
  position: relative;
  anchor-name: --target;
  animation: slide-up linear;
  animation-timeline: --timeline;
}
.popup {
  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: white;
  box-sizing: border-box;
  background: #aaf;
}
html {
  timeline-scope: --timeline;
}
#main {
  position-anchor: --target;
  view-timeline-name: --timeline;
}
@keyframes slide-up {
  0% {
    top: 0px;
    left: 0;
  }
  100% {
    top: -200px;
    left: 100px;
  }
}
Output 300px

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

Dismiss x
public
Bin info
flackrpro
0viewers