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";
}**
});