<div class="container">
    <p class="above">scroll down</p>
    <img class="myImg" src="https://ljc-dev.github.io/hosted-assets/jisoo.png" alt="jisoo">
  </div>
.above{
  font-size: 1.5rem;
  text-align: center;
  padding: 60vh 0;
}
.myImg {
  height: 300px;
  position: relative;
  left: -200px;
}
gsap.registerPlugin(ScrollTrigger)
gsap.to(".myImg", { duration: 1.5, x: 200, scrollTrigger: ".myImg" })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js