<div class="box box1 kawaii"></div>

<div class="box box2 kawaii"></div>

<div class="box box3 kawaii"></div>

body{

  display: flex;

  flex-direction: column;

}

​

.box2 { height: 50vh; }

​

gsap.registerPlugin(ScrollTrigger);

​

gsap.to('.box2', {

  scrollTrigger: {

    trigger: '.box2',

    markers: true,

  },

  x: '100%',

  ease: 'none',

  duration: 10,

});

​