Image loading issue with gsap to opacity
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 issu
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 on
