<h2>Scroll down</h2>
<div class="box"></div>
<div class="outline"></div>

body {
  height: 300vh;
}

h1, h2 {
  margin-bottom: 100vh;
}
h2 {
  text-align: center;
}

.box, .outline {
  position: fixed;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

.outline {
  width: 80px;
  height: 80px;
  transform: translate(-1px, -1px);
  outline: dashed 2px var(--color-surface-white)
}
gsap.to('.box', {
  x: 300, 
  scrollTrigger: {
    start: 100,
    end: 300,
    scrub: true
  }
});

gsap.to('.box', {
  x: -300, 
  scrollTrigger: {
    start: 400,
    end: 800,
    scrub: true
  }
});

External CSS

  1. https://codepen.io/GreenSock/pen/xxmzBrw/fcaef74061bb7a76e5263dfc076c363e.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/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.5.1/Draggable.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js
  9. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/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.5.1/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.5.1/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.5.1/ScrollToPlugin.min.js
  20. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js
  21. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  22. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js