At which point are images rendered on screen exactly and how rendering is affected by downloadable content?

[RedGlove]

Hello guys!

 

I am new to GSAP and really enjoying working with the platform! I am facing some issues in my animation and I would really like your thoughts. The issue probably goes beyond GSAP but still any information provided will be more than helpful.

 

So the issue boils down to this:

 

I created an animation using TimelineLite. In my page I have a loading logo showing on screen and when the assets are loaded the animation should start playing IMMEDIATELY after the loading logo disappears. I created a setup function where I set the elements of my animation and I create my animation "path". For example inside this function I use:

function setup(){
  var time = 0;
  var holdTime = 1;
  //initial position of elements
  this.tl.set("#x", {top:0,left:0});
  this.tl.set("#y", {top:0,left:0});
  this.tl.set("#z", {opacity:1});
  this.tl.set("#k", {opacity:0});
  //animation path
  time += holdTime;
  this.tl.to("#x", this.spinTime, {rotationY:"+=720"}, time);
  this.tl.to("#y", this.transitionTime, {opacity:0}, time);
  this.tl.to("#z", this.transitionTime, {opacity:1}, time+this.transitionTime);
 
  .
  .
  .

} 

In another function called "start" i simply play the timeline.

function start() {
 this.tl.play("start");
} 

The animation is working correctly and all but the main issue is the transition from the loading logo to the animation.

 

So in my code I take the following steps:

   -load loading logo

   -setup animation

   -remove loading logo

   -start animation.

 

The issue is, no matter if the images are completely downloaded the animation will start playing which results in a bad experience. What I am interested in doing is starting the animation only if all images are loaded(downloaded), positioned and ready to play. Bear in mind that this is a NO jquery project, so $(window).load is not a valid answer. 

 

Inside my code i tried using window.addEventListener("load", animation.start()); but I did't get the expected result. Instead the same thing happens.

 

After spending some time in dev tools I set a breakpoint in my code at this.tl.play("start"); just to follow the code execution to see at which point my images will start rendering. And this is what really confused me. After stepping over many many many functions suddenly the images appeared on screen. At that time the point of execution was inside TweenLite.min.js. After that I repeated the process a few times just to make sure that the images appear on screen inside TweenLite,min.js.

 

That being said, my question is the following:

How can I achieve a result where the loading logo stays on page until all elements load behind it, and by simply hiding the loading logo to get an instant image of the first frame lets say of the animation? Additionally at the moment of hiding the loading logo, will the browser need to do a repaint to present the elements that sit underneath? If so will this repaint be visible to the eye?

 

Regarding the fact that the images appear on screen when the code reaches TweenLite.min.js is this at all related or should I focus on downloading my content prior to anything else.

 

I am not sure if my question was clear enough, let me know for any further details!

[ohem]

Just start with your timeline paused, like:

var tl = new TimelineLite({ paused: true });

and use 

window.onload = function(){
tl.play();
}

to start the animation once everything is loaded.

 

Put all of your content in a div and make the div invisible in the CSS so that it doesn't show before it's loaded, like:

#content {
visibility: hidden;
}

And the beginning of your timeline, you can set your loader to display:none and set your content to visible.  Like this:

tl.set("#loader", {display: "none"}
tl.set("#content", {visibility: "visible"}

[RedGlove]

Thanks for the reply ohem.

 

I finally managed to solve my issue.

 

As I mentioned in my post I tried using 

window.addEventListener("load", animation.start()); 

 which has the same effect as what you suggested

window.onload = function(){
tl.play();
}

and I tried them both and they didn't seem to work.

 

What I had to do was to add the onload event handler on each individual image of my animation and increment a custom counter for each event triggered. And when the counter reaches the number of expected images on page then call gsap functions. Something like this:

var imageCount = 0;

for(var i=0; i<images.length; i++){
  var displayElement = document.createElement("img");
  displayElement.onload = updateCounter;
  displayElement.setAttribute("src", images[i].src);
}

function updateCounter(){
  imageCount++;
  
  if(imageCount==images.length){
    tl.play();
  }
}

So essentially my problem was related with synchronization. My javascript was injecting the image nodes, the request was sent to download the images from the html side of things but javascript was still running in the background reaching the animation point and while content was still downloading elements were starting to animate. Now the animation starts when all events are fired from each individual image.

[ohem]

window.onload has always worked for me but I'm glad you found something that works for you.

[Dipscom]

Hey guys!

 

Just chipping in:

window.addEventListener("load", animation.start()); 

and

window.onload = function(){
tl.play();
}

Are exactly the same thing. Just different syntax.

 

As for what you were trying to achieve, lakmis, you have reached the best (AFAIK) procedure - To actually listen for each of the images to load. 

 

Listening for the window object and/or the DOM object to be ready is tricky and can cause confusion depending on what is being loaded, when and how. For example, if your JS is not asynchronous it will hog a chunk of the bandwidth and divert resources to itself.

 

Here's Mozillla's articles on both the window.load and DOMContentLoaded.

 

https://developer.mozilla.org/en-US/docs/Web/Events/load

 

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

 

Jonathan also gave a nice little explanation about this order in another post:

 

http://greensock.com/forums/topic/12767-dynamic-sprite-sheets-with-sizmek/#entry53590

 

Because there was no code for us to troubleshoot, we can't really say what was going wrong. Again, great that you managed to work the solution out yourself.