How can I solve overflow happen between two sections when using ScrollMagic and GSAP to animate them?

Question

This is the first scene on intro video happen and it take 9200 time and after end it on the same section I need to make other scene which take 100% but when second scene animation
the other section get out with overflow and then disapear and I give two secions overflow hidden and nothing happen

//scenes
let introVideoScene = new ScrollMagic.Scene({
  duration: "9200",
  triggerElement: introPage,
  triggerHook: 0
})
  .setPin(introPage)
  .setTween()
  .addTo(controller);

and this animation happen on two sections which fade out one and the other come on it

let pageScene;
sections.forEach((slide, index, slides) => {
  const pageTl = gsap.timeline();
  let nextSlide = slides.length - 1 === index ? "end" : slides[index + 1];
  pageTl.fromTo(nextSlide, 4, { y: "0%" }, { y: "50%" });
  pageTl.fromTo(slide, 4, { opacity: 1, scale: 1 }, { opacity: 0, scale: 0.4 });
  pageTl.fromTo(nextSlide, 4, { y: "50%" }, { y: "0%" }, "-=4.5");
  pageTl.fromTo(burger, 6, { y: "-1000%" }, { y: "0%" });
  pageTl.fromTo(logo, 6, { y: "-1000%" }, { y: "0%" }, "-=2");

  //Create new scene
  if (slide.id === "introPage") {
    pageScene = new ScrollMagic.Scene({
      triggerElement: slide,
      duration: "100%",
      triggerHook: 0,
      offset: 9200
    })





      .setPin(introPage, { pushFollowers: false })
      .setTween(pageTl)
      .addTo(controller2);

  }
  else {
    pageScene = new ScrollMagic.Scene({
      triggerElement: slide,
      duration: "100%",
      triggerHook: 0
    })



      .setPin(slide, { pushFollowers: false })
      .setTween(pageTl)
      .addTo(controller2);

  }




});