Jump to content
Search Community

Removing class display:none breaks my scrollTrigger

RobbieC test
Moderator Tag

Recommended Posts

Good afternoon guys!

I came across a little issue on my localhost so I tried to put together a workable Codepen. Basically I have a loader and then the main content in a wrapper in the <main> tag with the class:

.is-loading #main_content {
  display: none;
  visibility: hidden;
}

The .is-loading class is on the body tag which I use gsap to remove when loader TL is complete. I know its the display:none that is breaking it because if you remove display:none from that class, the scrolltrigger displays and works correctly. The issue I have with just not having the display:none is that the user can scroll while the loader is playing and then once its complete the user will be somewhere else on the page. I don't want to use a scroll lock hack, so I want to try to use display: none.

 

I'm guessing that I need to recalculate the scrolltrigger or tell it to execute a different way. I have tried using "ScrollTrigger.refresh(true);" a few different ways, but I have had no luck.

 

FYI if you resize the window after the animation is complete, the portfolio section will appear but its broken and the scroll directs gets changed and only 2 images are displayed.

 

Any feedback or guidance would be greatly appreciated.

See the Pen c904f1e5295f3fb1864090bf680603ef by robbiecren07 (@robbiecren07) on CodePen

Link to comment
Share on other sites

I'm running out the door, so I don't have much time to chime in, but yeah, ScrollTrigger calculates its start/end values based on the element in the document flow, so if you take the trigger element out of the document flow with display: none, there's no way it can work. It won't know where the element sits on the page. See what I mean? 

 

You're welcome to do all the calculations yourself and feed raw numbers to the ScrollTrigger's start/end if you prefer that. 

  • Like 1
Link to comment
Share on other sites

I can't fork your CodePen, but this will work. Remove your initPortfolioSec from the init function and initiate it after you remove the .is-loading class.

 

function initLoader() {
  const loader = gsap.timeline({
      ...
      onComplete: () => {
          select("body").classList.remove("is-loading");
          initPortfolioSec();
      }
  });
}

function initPortfolioSec() {
	// do your ScrollTrigger magic here
}

function init(){
  initLoader();
}

window.addEventListener('load', function() {
  init();
});

Hope that helps.

 

  • Like 2
Link to comment
Share on other sites

I made the CodePen public, sorry about that (I forked one of my own private pens 😂). So I did what @Ihatetomatoes suggested and it works! I called my initPortfolioSec() function in the onComplete located inside the initLoader() function and removed it from the function init() list. (Just like the reply above)

 

I updated it in my CodePen.

 

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...