RobbieC Posted August 9, 2020 Share Posted August 9, 2020 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 More sharing options...
GreenSock Posted August 9, 2020 Share Posted August 9, 2020 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. 1 Link to comment Share on other sites More sharing options...
RobbieC Posted August 9, 2020 Author Share Posted August 9, 2020 No worries Jack. I wanted to start the thread before I logged off. I will continue to mess with it and see if I can figure out a solution later this evening. Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 9, 2020 Share Posted August 9, 2020 Hey @RobbieC, why don't you initiate your ScrollTrigger effects after you remove the .is-loading class? That way all the necessary elements will be on the page and will be used to calculate the right offsets. In your loader onComplete is the best place. 2 Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 9, 2020 Share Posted August 9, 2020 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. 2 Link to comment Share on other sites More sharing options...
RobbieC Posted August 10, 2020 Author Share Posted August 10, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now