ScrollTrigger: Lock whole page while animation is happening

[claudioirl]

      <div ref={divTrigger} className="waffle-container">
        <svg ref={svg} />
        <div className="div-boxes-container">
          <div ref={action1} className="div-box" />
          <div ref={action2} className="div-box" />
        </div>
      </div>

 

So I have this code right now. The goal is for the svg to stop in the middle of the screen and the point is that the rest of the following HTML body will also lock for around 200px of scrolling.

 

I also want to trigger something at around 75px and 150px of scrolling so that's why I added the action1 and action2 divs (red boxes)

 

The problem that I'm having right now is that even if the ScrollTrigger animation is working, the rest of the document (black boxes which is text) continue to scroll behind the svg, while I would want to  basically pin the whole page until the last red box reaches the end trigger.

 

Any help please, or maybe Im overcomplicating.

 

I basically just need:

• whole page to stop when the svg reaches the middle
• I get around 200px of page freezed
• I'm able to run a function when the scroll reaches 50% and 75%
  • Not that important but also run on scroll back (when it goes from 75% and 50% downwards)

 

Thank you for any help btw

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi @claudioirl and welcome to the GreenSock forums!

 

I think you need to use ScrollTrigger pin configuration in order to pin the container of your element at certain point and during some scroll distance.

 

It seems that you are using React, so for creating a minimal demo please use this as a starting point:

https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js

 

Also take a look at this guide in order to get a better grasp of how simple it is to use GSAP in a React app:

 

Finally is recommended to use GSAP Context on your React/Vue projects for simpler scoping and cleanup, among other features:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Let us know if you have more questions.

 

Happy Tweening!