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

Sakar · March 31, 2014

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

Jonathan · March 31, 2014

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!

Sakar · April 15, 2014

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>

Bluefire367 · August 13, 2015

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

Jonathan · August 13, 2015

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

Bluefire367 · August 14, 2015

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

OSUblake · August 14, 2015

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

Notifications

Messages

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

Warning: Please note

Recommended Posts

Sakar

Link to comment

Share on other sites

Jonathan

Link to comment

Share on other sites

Sakar

Link to comment

Share on other sites

Bluefire367

Link to comment

Share on other sites

Jonathan

Link to comment

Share on other sites

Bluefire367

Link to comment

Share on other sites

OSUblake

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members