<div class="fake-page">
  <div class="scrollbar"></div>
  <div class="content"></div>
  <div class="focus"></div>
</div>
* { box-sizing: border-box; }
.fake-page {
  width: 400px;
  height: 500px;
  position: relative;
  border: 10px solid black;
  border-radius: 10px;
  overflow: hidden;
}
.scrollbar {
  width: 4%;
  height: 20%;
  position: absolute;
  top: 2%;
  right: 2%;
  background-color: black;
  border-radius: 50px;
}
.content {
  position: absolute;
  top: 60%;
  left: 30%;
  width: 50%;
  height: 20%;
  border-radius: 10px;
  background-color: black;
}
.focus {
  background-color: blue;
  width: 90%;
  height: 10%;
  border-radius: 10px;
  position: absolute;
  top: 85%;
  left: 2%;
}
const tl = gsap.timeline({defaults: {duration: 3, ease: "none"}, repeat: -1, repeatDelay: 1})
.to(".scrollbar", {yPercent: 384})
.to(".content", {y: -200}, 0)
.to(".focus", {y: -400}, 0)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/CSSRulePlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EaselPlugin.min.js
  9. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EasePack.min.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  11. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js
  12. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  13. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js
  14. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js
  15. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js
  16. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js
  17. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/PixiPlugin.min.js
  18. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  19. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/ScrollToPlugin.min.js
  20. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  21. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js