Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sakar

Problem with html pages - Animation starts only after loading all page items

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

I just give my first try to JS gsap & html
Jumped from actionscript
Animating is nice and fun and work perfect here topic.
When I upload to my server, I realise a problem.
It first load all images and text and then ...starting the animation.

Is there any method to load first and then start the animation?
*All scripts are loaded inside head tag
Thanks

Link to post
Share on other sites

Hello Sakar, and Welcome to the GreenSock Forums!

 

There could be a number of things causing that.

  • How are you loading GSAP and your custom javascript?
  • Since you are loading scripts in the head you have to make sure your custom code waits until the pages is loaded or / and is ready using a window load event or jQuery ready() event.
  • Or you can load your scripts in the footer like in the code example below.
  • You could also add a GSAP special property like paused to the timeline and then play the animation when the page is fully loaded.

You can use TweenMax for convenience which includes all the goodies like TweenLite, CSSPlugin, EasingPlugin, TimelineLite, and TimelineMax. Example of setting up your HTML page so the script tags are right before the body, so you make sure everything above is loaded before animating.. is like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<!-- HTML CONTENT GOES HERE -->

<!-- SCRIPTS GOES HERE OR IN HEAD -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script>
<script>
// Custom GSAP code goes here
<script>
</body>
</html>

Is it possible to post your code or show your code in live editable environment so we can better help you by seeing your code in action.

 

Here is a video tut by GreenSock on How to create a codepen demo example.

 

Also here is a GreenSock Basic Starter CodePen example to see a working example with HTML, CSS, and JS.

 

See the Pen nwbIi by GreenSock (@GreenSock) on CodePen

 

Without seeing your code it will be hard to see why your animation isn't waiting until the page loads. I'm sure once we see your limited code example, there are a lot of people in the community who will be willing to help you! :)

  • Like 3
Link to post
Share on other sites
  • 2 weeks later...

Thanks for your help
 
All GSAP and JS are loaded inside the <head> tag.

It is hard to show all the code, but I found a solution,
of making a loader - after that everything works fine.

 

    <script>
        $(window).load(function(){
          $('#home_loader').fadeOut(1000);  
        });
    </script>
#home_loader {
	position: fixed;
	width:100%;
	height: 100%;
	background-color: #F23A9D;
	text-align: center;
	top:0px;
	left:0px;
	z-index: 25;
	display:table;
	overflow:hidden;
}

#preloaderImage {
    display: block;
    margin-top: 30%;
}
<div id="home_loader">
        <span id="preloaderImage"><img src="img/preloader.gif"/></span>
      </div>
Link to post
Share on other sites
  • 1 year later...

Hi,

 

I'm having the same problem. All my html elements load before the animation starts. I attached a zip file of my work because it contains image files so I couldn't put it on codepen. This doesn't seem like a common problem so I wanted to make sure I wasn't doing anything incorrectly. If you could take a look I would really appreciate it. Thanks!

ABB_HTML5_TEST.zip

Link to post
Share on other sites

Hello Bluefire367, and welcome to the GreenSock forum!

 

I would place overflow:hidden on your #container selector, to make sure anything outside your container will be hidden.

#container {
    overflow:hidden;
}

Also you can add visibility:hidden on your #text1 and #flap selector since you have those using a from() tween start at autoAlpha 0. :

#text1,
#flap {
     visibility:hidden;
}

It is just an extra step to take just make your CSS play nice.

 

Resource:

CSS overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

CSS visibility: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

 

i hope this helps :)

Link to post
Share on other sites

Hi Jon thank you for the tips! Definitely helped somewhat but still having trouble with the elements that don't have the "visibility:hidden". They still show up when the animation is loading. Will keep playing around.

 

Also, I've been finding it very difficult to animate without the use of a slider so when I tried to implement one I ran into some issues. The 'yoyo' attribute does not play and also the slider breaks when there is a 'staggerTo' in the timeline (line 283). Some of the demos in videos show the slider working with the 'staggerTo' so I'm not sure what the problem is. Any thoughts?

 

Thank you!!

SliderTest.zip

Link to post
Share on other sites

You're not starting the animation after the images have loaded. Look at the $(window).load(...) in the post right before yours. Fork this and simplify it so we can see what the problem is. I used lorempixel for the images. You can set the size of the image like this - http://lorempixel.com/400/200/ which will be 400x200. Add '?i=' and a random number on the end of the url to stop the browser from caching the image.

 

See the Pen 2925b442fea5459ed065e81abc7194f1 by osublake (@osublake) on CodePen

Link to post
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.

×