"Display: none" breaks Scrolltrigger

[KwabenaOwusu]

Hi All,

I am encountering an issue which I couldn't solve in the last two days.

 

Structure using two main containers:  "preloadContainer" and "mainContainer".

preloadContainer contains an animation, which runs on page load.

mainContainer is hidden using "display:none".

 

After animation finishes, mainContainer is set to display:"block".

I am using ScrollSmoother. It seems that hidden an element with "display:none" and unhidding it with "display:"block" breaks ScrollSmoother.

 

"Visibility:hidden" and then "autoAlpha:1" does not break scrollSmoother but I cannot use that (User could scroll away from animation container).

 

Any ideas?

Thanks very much.

See the Pen KKYMJez by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Rodrigo]

Hi,

 

Did you tried creating the ScrollSmoother instance and your page's ScrollTriggers after the loader is completed and you toggled the display property on your main container element?

 

let smoother;
let pushUpContainer = document.querySelectorAll(".pushUpText");

fillerAnimation.to(fillerContainer, {
  width: "198px",
  duration: 6,
  onComplete: () => {
    /* Using "display:none" breaks scrolltrigger */
    gsap.set(mainContainer, { display: "block" });
    smoother = let smoother = ScrollSmoother.create({
      wrapper: ".smooth-wrapper",
      content: ".smooth-content",
      smooth: 3.5,
      effects: true
    });
    pushUpContainer.forEach((container) => {
      let textElements = container.querySelectorAll("h2 ,p");
      let tl = gsap.timeline({
        defaults: {
          yPercent: 30,
          duration: 1.5,
          opacity: 0,
          ease: "power1.inOut"
        },
        scrollTrigger: {
          trigger: container,
          start: "top 80%",
          markers: true,
          toggleActions: "restart none none reset"
        }
      });
      tl.from(textElements, {});
    });
  }
});

I'd try something like that.

 

Hopefully this helps.

Happy Tweening!

[KwabenaOwusu]

@Rodrigo: Thanks very much for the useful hint. I followed your advice and it is working.

Unfortunately I am encountering a small issue I couldn't solve yesterday. 

I am trying to hide "preloadContainer" after the animation is done.

 

I created a master timeline and I can find the right spot to add: gsap.to(preloadContainer,{display:"none"}) .

 

Goal: Scroll down to mainContainer using "gsap.to (window,{scrollTo:mainContainer}) and hide preloadContainer, which is above mainContainer.

My timing is off: preloaderContainer is hidden before the animation (scrolling down finishes).

 

Thanks in advance

 

 

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[KwabenaOwusu]

@GSAP Helper: I am confused by your "answer".

I add the link to codepen. In my first post.

 

 

[Rodrigo]

Hi,

 

Is not clear to me what you're trying to do based on your last post:

1 hour ago, KwabenaOwusu said:

Scroll down to mainContainer using "gsap.to (window,{scrollTo:mainContainer}) and hide preloadContainer, which is above mainContainer.

My timing is off: preloaderContainer is hidden before the animation (scrolling down finishes).

And the demo of your first post doesn't reflects any of that since the preloader there moves u without scrolling. We can't be guessing here what users are trying to achieve and where things are not working, that's why we expect users to provide minimal demos that clearly illustrates the problems they're having.

 

Happy Tweening!

[KwabenaOwusu]

@Rodrigo:  I will try again to put it in simple terms.

1. The green container contains the preload animation and only this should be shown until animation finishes.

2. The rest (mainContainer) is hidden in the beginning.

3. As soon as the animation finishes, the rest(mainContainer) is unhidden and the window scrolls automatically to this container.

 

4. preloaderContainer should be then hidden. This line (line 36) in my code breaks scrollsmoother.

 .to(preloaderContainer, { display: "none" }

 

 

[Rodrigo]

6 hours ago, KwabenaOwusu said:

3. As soon as the animation finishes, the rest(mainContainer) is unhidden and the window scrolls automatically to this container.

I see a problem with this part, if you scroll down to that section, what can prevent users from scrolling back up to it? See what I mean?

 

I think the current approach you have now is the best way to do this. The only way I can see this not creating some confusing UX is to use a ScrollTrigger instance that just toggles that particular animation without scrubbing:

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

 

Hopefully this helps.

Happy Tweening!

[KwabenaOwusu]

@Rodrigo: Thanks very much for your effort. After going through the docs, I think I have to experiment with 

ScrollTrigger.refresh();

because I am altering the whole structure by "taking out" that container. I think Scrolltrigger needs to recalculate.