html, body { height: 100%; margin: 0; }
#container { height: 100%; position: relative; overflow: hidden; }
section { width: 100%; height: 100%; position: absolute; }
.section01 { background: orange; width: 100%; height: 100%; }
.section02 { background: yellowgreen; }
.section03 { background: firebrick; }
.section04 { background: cornflowerblue; }
.section05 { background: seagreen; }

gsap.registerPlugin(ScrollTrigger);
gsap.defaults({ease: "power1", duration: 3});

const tl = gsap.timeline();
tl.from(".section03", {xPercent: -100})
  .from(".section04", {xPercent: 100})
  .from(".section05", {yPercent: 100});

ScrollTrigger.create({
  animation: tl,
  trigger: "#container",
  start: "top top", 
  end: "+=4000",
  pin: true,
  scrub: true,
  anticipatePin: 1
});