Jump to content
Search Community

wait for an animation

jemmeli 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

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() {



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>');


'position': 'absolute',
'top': '190px',
'left': '529px'



Link to comment
Share on other sites

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.





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




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

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