html, body
  margin: 0
  display: flex
  width: 100vw
  // height: 100vh
  
  
.container
  width: 100%
  height: 100%
  box-sizing: border-box
  
section
  height: 100vh
  border: 1px solid #f24
  background: #000
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  
.box 
  width: 50px
  height: 50px
  background: #fff
  
.card
  border: 1px solid #fff
  width: 100%
  height: 100px

gsap.registerPlugin(ScrollTrigger);
const element = document.querySelector(".container");

gsap.fromTo(
  element.querySelector(".card.one"),
  { opacity: 0,x :200 },
  {
    opacity: 1,
    x:0,
    scrollTrigger: {
      trigger: element.querySelector(".first"),
      start: "top top",
      end: "60% center",
      scrub: true,
      toggleActions: "play pause resume reverse",
    },
  }
);

gsap.fromTo(
  element.querySelector(".card.two"),
  { opacity: 0,x :-200 },
  {
    opacity: 1,
    x:0,
    scrollTrigger: {
      trigger: element.querySelector(".first"),
      start: "10% top",
      end: "70% center",
      scrub: true,
      toggleActions: "play pause resume reverse",
    },
  }
);

gsap.fromTo(
  element.querySelector(".card.three"),
  { opacity: 0,x :200 },
  {
    opacity: 1,
    x:0,
    scrollTrigger: {
      trigger: element.querySelector(".first"),
      start: "20% top",
      end: "80% center",
      scrub: true,
      toggleActions: "play pause resume reverse",
    },
  }
);

gsap.fromTo(
  element.querySelector(".box.two"),
  { opacity: 0, scale:5, rotate:0 },
  {
    opacity: 1,
    scale:1,
    rotate: 360,
    scrollTrigger: {
      trigger: element.querySelector(".second"),
      start: "top center",
      end: "50% center",
      scrub: true,
      // markers: true,
      toggleActions: "play pause resume reverse",
    },
  }
);