Jump to content
Search Community

How to block the scrollbar with the preload page

Umberto test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi,

 

The issue is that you're setting the overflow to auto before the timeline even starts:

const showDemo = () => { 
  document.body.style.overflow = "auto";
  document.scrollingElement.scrollTo(0, 0);
  const tl = gsap.timeline({});
  /*
    Timeline Instances Here
  */
};

imagesLoaded(wrapImg).on("progress", updateProgress).on("always", showDemo);

Just update the overflow style using an onComplete callback in the timeline:

const showDemo = () => { 
  document.scrollingElement.scrollTo(0, 0);       
  var tl = gsap.timeline({
    onComplete: () => document.body.style.overflow = "auto",
  });
  /*
    Timeline Instances Here
  */
};

imagesLoaded(wrapImg).on("progress", updateProgress).on("always", showDemo);

That seems to work the way you expect. Let us know if you have more questions.

 

Happy Tweening!

Link to comment
Share on other sites

This job is perfect.

 

1. I need to block scrolling too, in fact, during loading, if I try to scroll after loading, the page is in the wrong position and not at the beginning.

 

2. I also tried with:

 

// setters
smoother. paused(true);
// getters
if (!smoother.paused()) {
   // do stuff...
}

but I did not succeed.

I searched the forum for examples but couldn't find anything.

 

Is this possible?

Thank you

Link to comment
Share on other sites

  • Solution

Hi,

 

What you should do is either create the ScrollSmoother instance and pause it immediately. Then when the loading animation is completed un-pause it:

smoother = ScrollSmoother.create({
  wrapper: "#smooth-wrapper",
  content: "#smooth-content",
  smooth: 2,
  normalizeScroll: true,
  ignoreMobileResize: true,
  effects: true,
  onUpdate: (self) => skewSetter(clamp(self.getVelocity() / -150)),
  onStop: () => skewSetter(0)
});

smoother.paused(true);

// Once the loading tween is completed
const showDemo = () => { 
  document.scrollingElement.scrollTo(0, 0);       
  var tl = gsap.timeline({
    onComplete: () => {
      document.body.style.overflow = "auto";
      smoother.paused(false);
    },
  });
  /*
    Timeline Instances Here
  */
};

Another approach would be to create some sort of init method that handles your MatchMedia stuff, as well as your ScrollSmoother instance and run that once the loading is completed:

const myInit = () => {
  // Initialize all your MatchMedia and ScrollSmoother stuff here
};

const showDemo = () => { 
  document.scrollingElement.scrollTo(0, 0);       
  var tl = gsap.timeline({
    onComplete: myInit,
  });
  /*
    Timeline Instances Here
  */
};

Yet another option is to prevent the default behaviour in the scroll event on the window object until the loading is completed:

// At the start of your app
const preventScroll = (e) => {
  e.preventDefault();
};
window.addEventListener("scroll", preventScroll);

const showDemo = () => {
  document.scrollingElement.scrollTo(0, 0);       
  var tl = gsap.timeline({
    onComplete: () => {
      document.body.style.overflow = "auto";
      window.removeEventListener("scroll", preventScroll);
    },
  });
  /*
    Timeline Instances Here
  */
};

 

Hopefully this helps.

 

Happy Tweening!

Link to comment
Share on other sites

I ask for one last help.

 

I have tested with all animations and they work perfectly.
I have only one problem with Draggable Slider.

 

1. In the first example, if I scroll while loading, the page stays fixed.

 

2. In the second example, I didn't put Draggable Slider in the HTML and when I scroll while loading the page just falls apart and doesn't stay fixed.

 

See the Pen xxJXePJ by umberto (@umberto) on CodePen

 

See the Pen gOjXrPM by umberto (@umberto) on CodePen

 

Where am I wrong?

Link to comment
Share on other sites

Hi,

 

There are some errors in the console on the second example:

GSAP target .js-skew not found

let skewSetter = gsap.quickTo(".js-skew", "skewY")

Uncaught TypeError: Cannot read properties of null (reading 'querySelector')

const proxy = container.querySelector(".proxy");

 

3 hours ago, Umberto said:

when I scroll while loading the page just falls apart and doesn't stay fixed.

I scrolled down and nothing broke, the scroll position wasn't 0 but everything is working as expected. I don't know what you mean by falling apart, but in Chrome and Firefox on Ubuntu 22 and 20 everything works except for the scroll position 🤷‍♂️

 

Happy Tweening!

Link to comment
Share on other sites

I probably explained myself badly.
Indeed, in the 1st example if I scroll while loading, the position is 0, while in the second the page continues to scroll down and therefore there is no position 0.

 

I wanted this, that the one in the second example started from position 0

 

I hope I was clear
Sorry for my English

Link to comment
Share on other sites

Hi,

 

You can add a scrollTo call in the onComplete callback:

const Preload = () => {
  document.scrollingElement.scrollTo(0, 0);
  var tl = gsap.timeline({
    onComplete: () => {
      document.body.style.overflow = "auto";
      window.scrollTo(0,0); // <- Here
      smoother.paused(false);
    }
  });
};

Another option is find a way to prevent the scroll event in the body element and allow it back in the onComplete callback. Finally your second example still has those errors I mentioned before.

 

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...