Image loading issue with gsap to opacity

[jramke]

Hey guys,

 

i have a problem with creating and animating images form a data-attribute.

First step im creating the images and then want them to hide , and only be visible on mouse hover, thats working so far so good.

But when im hiding the images with gsap (opacity: 0, scale: 0.4) after creating them, they are buggy/delayed on the first time the opacity and scale are set to 1. If the images where visible once they are appearing smoothly.
I dont really know if its a gsap issue or im missing some basic knowledge when creating images with js.

 

For example if i set the opacity to 0.1 for the hidden state and not to 0 the images appearing smoothly on the first time.

 

Thanks for your time and help.

Joost

See the Pen wvYdqwa by jramke (@jramke) on CodePen

[Rodrigo]

Hi @jramke and welcome to the GreenSock forums!

 

I'm a bit lost here, honestly I've never seen anything like this in all my years using GSAP. I fiddled a bit with your example and this looks more like a browser rendering hiccup than a GSAP related issue.

 

Using autoAlpha (combination of opacity and visibility) seems to work better and giving a easing function at the start of the animation seems to work a bit better:

createHoverImage() {
  // let imageElm = document.createElement('div');
  let imageElm = new Image(900);
  imageElm.src = this.imgUrl;
  imageElm.classList.add("hover-image");
  this.el.appendChild(imageElm);
  // Changes Here
  gsap.set(imageElm, { autoAlpha: 1, scale: 0.001 });
  setTimeout(() => {
    gsap.set(imageElm, { autoAlpha: 0, scale: 0.4 });
  }, 100);    
  return imageElm;
}
move() {
  /*...*/
}
toggleVisibility(el, show, duration = null) {
  let time = {};
  if (duration !== null) {
    time = {
      duration: 0,
    }
  }
  gsap.to(el, {
    autoAlpha: show ? 1 : 0,   
    scale: show ? 1 : 0.4,
    ease: show ? "power1.in" : "power1.out",
    ...time,
  });
}

Of course this is more of a hack than a real solution, but again I'm almost 100% sure that this is not GSAP related as in Firefox on Ubuntu 20 & 22 there is no problem at all 🤷‍♂️

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Yep, that's definitely a browser thing - my best guess is that Chrome ignores rendering anything that's opacity: 0 and since your images NEVER rendered even one time initially, the browser didn't even bother to rasterize the image data (probably a performance optimization in Chrome) but then the very first time the browser does have to render it, it is forced to do all that decoding/rasterizing work to create that graphics layer. It's not exactly a cheap process, so it bogs down initially but once the image has rendered once, Chrome now has that data all cached/decoded/rasterized so it's very cheap rendering-wise. 

 

One solution would be to add a "load" listener to your images and then as soon as they load, set their opacity to 0.001 just so that the browser is like "oh, I guess I've gotta process that image to get it ready to display..." and then after a short time (like 100ms), set opacity back to 0. 

 

imageElm.addEventListener("load", () => {
  if (imageElm.style.opacity === "0") { // skip if the user already hovered and opacity isn't 0 anymore.
    imageElm.style.opacity = "0.001";
    setTimeout(() => imageElm.style.opacity = "0", 100);
  }
});

See the Pen VwEbVLM?editors=0010 by GreenSock (@GreenSock) on CodePen

[jramke]

Hey guys,

 

thanks for the really fast answers.

I think the solution with the eventlistener ist working better for me, but im definitely having a look at the autoAlpha property, this sounds cool.

 

For future gsap questions im definitely coming back to this forum.