Jump to content
Search Community

IE & Edge flashs when animate multiple images to video

Marv 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

Hello GreenSocks!

I've been working with gsap for a short while. But this is my first problem with which I can not get any further. So my first thread  ;) Hello!!

 

My Goal is:

to animate multiple Images to a Video. For this I found already a snippet (dont now the url anymore) which displays and hide immediately a image (Combined with a staggerTo).

 

So my Problem is:

It works! :-P But not on all Browsers. If i clean the Cache or hit reload, over and over, the animation in Internet Explorer and Edge is very very flashy!

 

My Question is:

What went wrong?

See the Pen BJyYjG by taeq (@taeq) on CodePen

Link to comment
Share on other sites

Hi @Marv

 

As soon as you set the src of an image, it starts loading. You're setting the onload event after you set the src, so if it's the image is cached, the onload can get screwy, or might not even fire. So always set the src last. 

 

var img = new Image()
img.onload = onLoad;
img.onerror = onError;
img.src = path;

 

There were also some other issues getting your images using http. On Codepen, you have to use https.

 

For preloading images, using promises works well.

 

loadTextures(50)
  .then(function(images) { console.log("Here be your images", images); })
  .catch(function(error) { console.log(error); })

function loadTextures(numTextures) {
  
  var promises = [];
  
  for (var i = 1; i <= numTextures; i++) {       
    promises.push(loadTexture("some-path"));
  }    
  
  return Promise.all(promises);
}

function loadTexture(path) {
  return new Promise(function(resolve, reject) {
    
    var img = new Image();    
    img.onload = function() { resolve(img); }
    img.onerror = function() { reject("Error loading " + path); };        
    img.src = path; // Setting the src last
  });
}

 

 

And for this, why not use canvas. You're already naming your elements that, so why not use the real thing?

 

See the Pen vpEQzY?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Wow you create a whole new script! And it looks awesome. Thx! :) Now, if i want to use this, i have to change it a bit. Ofcourse it is only a small part of a big script.

 

But there are one thing: Your script is not working in Internet Explorer at all. So right now it is not useable for me :(

 

Edit: And here is the example script i looked up: http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/

Link to comment
Share on other sites

40 minutes ago, Marv said:

But there are one thing: Your script is not working in Internet Explorer at all. So right now it is not useable for me :(

 

Oh yeah. IE doesn't have a Promise. Just include this script to get a polyfill for the Promise, and you should be good. It's using the polyfill.io service.

 

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Promise"></script>

 

What I made should be pretty easy to extend, but if you need any help, just let me know. 

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