wait for an animation

[jemmeli]

hello
 
friends I want to show an animation while the site is loader completely and I use GSAp to accomplish this task but the page web is get loded fast , and i could not see the animation , how can i delay the load , and ready function of jquery to wait till my animation completed 
 
this is my code in ready function of jquery :

 

$(document).ready(function() {
$('body').fadeOut(100);
$('body').before('

 

');
});

 

and this is my code in load function of jquery :

 

$( window).on('load', function() {

var tl = new TimelineMax();

tl.to($('#preloder'), 0, {backgroundPosition:'0px -237px', delay:3})
.to($('#preloder'), 0, {backgroundPosition:'0px -474px', delay:4})
.to($('#preloder'), 0, {backgroundPosition:'0px -711px', delay:3})
.to($('#preloder'), 0, {backgroundPosition:'0px -948px', delay:5})
.to($('#preloder'), 0, {backgroundPosition:'0px -948px', delay:5});
 

$('.paceDiv').append('<div id="preloder"></div>');

 

$('#preloder').css({
'position': 'absolute',
'top': '190px',
'left': '529px'
});

$('body').fadeIn();
$('.paceDiv').fadeOut();

});

[Rodrigo]

Hi and Welcome to the GreenSock forums.

 

This has more to do with CSS than anything else. What you can do is add all your content in a main wrapper and set that element's opacity and visibility through the stylesheet and the when the page is ready or loaded use GSAP to fade it in.

 

CSS

.main-wrapper
{
  opacity:0;
  visibility:hidden;
}

HTML

<div class="main-wrapper" id="main-cont-wrapper">

<!-- ALL YOUR CONTENT HERE -->

</div>

JS

$(window).on("load", function()
{
  TweenLite.to("#main-cont-wrapper", 0.5, {autoAlpha:1});
});

Finally a way to extend the loading time (I believe that this is the first time I read someone wishing for a longer loading time )could be to add an image to the page, give it an absolute position and visibility:hidden, in order to take it out of the document flow and avoid user interaction. Keep in mind that the window load method kicks in when everything is loaded, including images.