preload time and pause scrolling onleave action

[artstyle]

hello
i have 2 questions
1. this landing is about 3.5mb weight which is not too much. why sometimes when i open it i have to wait about 1-2 seconds to "load" it? looks like it loading the gsap script, its weight about 60kb so why its lagging???
2. as u can see i have onLeave and onEnterback callbacks for the sections(example 1 and 2 sections) 
if you look closer the scrolling continues  while onleave animations is still in progress.

i want to make reveal and hide animations looks smoother while scrolling, it should look like this:
-scrolling to the end of the section1, onleave callback stars, scrolling paused

-onleave callback section1 in progress, scrolling paused

-onleave callback section1 end, continue scrolling

-onenter callback section2 starts, scrolling paused

-onenter callback section2 in progress, scrolling paused

-onenter callback section2 end, scrolling continue

something like this
can you help me please?

See the Pen ExgYEge?editors=0100 by aptypkaa (@aptypkaa) on CodePen

[GreenSock]

Welcome to the forums, @artstyle. I like the animation! 

 

Unfortunately, you've got a LOT of code to comb through - we just don't have the resources to provide free consulting like this. If you need some help, you have three options:

1. Simplify things to a minimal demo and just focus on one issue at a time. We'd be happy to help with any GSAP-specific questions. No need to use the real images and assets - just simple <div> elements or whatever can help simplify things. 
2. Hire a developer to do a performance audit and/or help iron out any logic issues that may exist in your ScrollTrigger/GSAP code. If you need our help, you can contact us privately and we can talk about pricing and scheduling.
3. Hope someone else in the community is willing to dive in and help for free. 

Happy tweening!

[artstyle]

here is the minimal demo

See the Pen ExgYEge?editors=1010 by aptypkaa (@aptypkaa) on CodePen

[akapowl]

 

Hye @artstyle

 

You could somewhat achieve what you intend, by setting the overflow of your body to hidden in your callbacks and setting it back by e.g. clearing the props in onComplete- and onReverseComplete- callbacks for your animation-timelines. This way you would prevent users to keep scrolling for the time the timeline plays. 

 

This comes with problems though, that are ( if I am not mistaken ) caused by how scrolling is taken care of in browsers.

 

You'll notice in the demo below, that it works fine when entering, but on leaving, the position of things will almost always ( no matter how fast the scroll ) have slightly changed already, before ScrollTrigger's callbacks fire. That is because ( to say it in my own trivial attempt ) the scrolling is prioritized over the rest of the script, thus even the ( already super fast ) ScrollTrigger callbacks are a teeny tiny bit behind the scrolling there ( oh boy, I hope I am not talking complete 'bulldogs' here ).

 

 

I'll quote @ZachSaucier ( who said this on the topic of fullpage-like scrolljacking ) because I think, the gist of what he said there also applies in this scenario.

 

It should be said that ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool [like fullpage.js]. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way. 

 

 

To me personally  this also feels like a pretty bad user-experience ( the scrollbar hiding and showing all the time ), especially for people who are scrubbing on the scrollbar to get where they want on the page.

 

Anyways, I myself don't know of a different approach, you could try, so here is my example nonetheless.

 

See the Pen d379cd56a65b0fbfaab5f6c12cb7b673 by akapowl (@akapowl) on CodePen

 

[artstyle]

works but looks very bad. definitely not the solution