Stop background page scrolling when ScrollTrigger animates timeline

[DeltaFrog]

Hi GSAP Fam,

 

Is there a way to stop the page scrolling while ScrollTrigger scrubs through the animation timeline?   Currently when the charts reach the middle of the page the animation scrubs through the crossfade timeline but the page keeps scrolling up behind it.  I'd like the page to stop and wait for the timeline to finish and then everything scrolls up together.   How do I get the page to pin also and wait for the animation to finish before it continues to scroll? 

 

 

Thanks yall!    

 

 

 

See the Pen cc437182656f9da692e58e14d69cb391 by chriscalabrese (@chriscalabrese) on CodePen

[DeltaFrog]

I figure it out.   

I just changed the trigger from pin: true to pin: "body"

 

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".centerMeHorz",
    start: "60% 50%",
    end: "2400px top",
     markers: "true",
    scrub: 1,
   
    snap: {
      snapTo: .33,
      duration: 0.01,
      ease: "none"
    },
    pin: "body"
    
  }
  
});
 

[DeltaFrog]

Hmm, changing to "body" works but seems to break my word press Elementor editor.  :S    Is there a better way or is this the correct way?   

[OSUblake]

I'm not sure pinning the body is a good idea. I guess you could just pin a background element, kind of like this.

 

See the Pen NWXvJzN by GreenSock (@GreenSock) on CodePen

 

[DeltaFrog]

Seems like "body" is working but if I run into any problems I'll leverage this, thanks Blake!