Jump to content
Search Community

How do I prevent the body content from flashing before splash page loads?

m4rsibar test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

https://m4rsibar.github.io/Editorial/slider/java.html

 

The body flashes before the splash page has a chance to load, i've tried displaying: none on the content(which is a wrapper around all of the content) and then changing to display: initial in the showComplete function (in bold...where it's called is in bold too)

I'm using the gsap library to animate the splash page.

 

Also, an aside: i tried changing the CDN link to the timeline lite version (i also tried the tweenlite version), and changed all instances in my code from "TimelineMax" to "TimelineLite" and it wouldnt work, how do I fix this?

 let tl = new TimelineMax();

tl.staggerTo(
  ".landPageLetters",
  1.4,
  {
    opacity: 1,
    ease: Expo.easeInOut
  },
  0.3, "init"
);

tl.to(".overlay", 0.8, {
  visibility: "visible",
  y: 0,
  ease: Bounce.easeOut
},"init+=2.2");

tl.to("button", 0.8, {
  opacity: "1"
});

let button = document.querySelector(".enterButton");
button.addEventListener("click", _ => {

    tl.to('.enterButton', 0.1, {scaleX:1.5, scaleY:1.5,  ease: Power4.easeInOut} )
        tl.to('.enterButton', 0.1, {scaleX:0.2, scaleY:0.2, opacity: 0, delay:0.3,  ease: Power4.easeInOut})

    tl.to("button", .7, {
    y:"-120%",
    opacity: "0"
  },"disappear")

  tl.to(".overlay", 1.2, {
    y: "-120%",
   ease:Power1.easeOut,
   **onComplete: showContent**

  },"disappear+.7")

  tl.to(".overlayContainer", 1, {
    y: "-120%",
   ease:Power1.easeOut,
  })
  tl.staggerTo(
    ".landPageLetters",
    2,
    {
      y: "-120%",
      opacity: 0.2,
      ease: Expo.easeInOut,
    },
    0.1, "disappear+=.8"
  )

  tl.staggerFromTo(".navbar ul li", 1, {
    opacity:0,
    y:8
},{
    ease:Expo.easeInOut,
    opacity: 1,
    y:0
},0.3, "disappear+=1.5")

content=document.querySelector('.content');

  **function showContent(){
            // content.style.display="initial";
            body.style.overflow="auto";
            }**
});
Link to comment
Share on other sites

I'm on a phone riding a train, so, much limited on resources here. Giving a total shot in the dark as I've not even seen your code.

 

Your CSS is somewhere that is taking a moment to load. During that moment your content is showing. The more extreme solution here is to add a inline style to your wrapper tag and set it's visibility to hidden (which is better than display:none for a few reasons). That will guarantee the visibility being parsed before the wrapper tag is rendered.

 

GSAP should then, be able to pick it from there and make your life easy. ;)

 

As for your aside, I am not sure what you are asking or what you have done. The safe bet here is to have the CDN link pointing to TweenMax as it will cover the majority of the tweenies needs cases. The kilobytes you save by trying to only load the lite versions is so minimal that is not worth the trouble (plus, puling one TweenMax bundle is better than  three or four separate lite bundles from the CDN).

  • Like 4
Link to comment
Share on other sites

With a little more research I've found out why the Lite versions weren't working, i think i'd need the CSS plugin as well, the Max version includes it.  (the post i read this on was a little dated)

Initially making the wrapper hidden, then visible is working better than what I had, but I must ask, why would you consider this an "extreme" solution?  What would a less extreme solution be?  

 

I also realized in my JS I was setting the wrapper to display: "initial", but in the CSS .wrapper's display:none was commented out.. oops.. ?

  • Like 1
Link to comment
Share on other sites

It is extreme in the sense that you will be styling the tag in the most specific manner possible.

 

Depending on the size of your project and the number of people involved in it, you don't want that sort of specificy as it makes overriding the style very cumbersome.

 

A less extreme version of this is to have a <style> tag inside your HTML with the desired visibility rule  targeting the necessary wrapper tag.

 

Another step up from the extreme is the external <link> to a stylesheet but making sure it gets parsed before the HTML.

 

By the way, well done on your discovery. I find it super satisfying when I am stuck on a problem and eventually I figure out the solution.

  • Like 4
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...