Images flash in initial load

[AdMan123]

I have images within a banner ad that seem flash on the initial load, when the animation repeats it doesn't happen. I've tried autoAlpha but it doesn't work (or my implementation is incorrect). If anyone has any advice I'd be very grateful to hear, thank you!

See the Pen RwELqZN by wok123 (@wok123) on CodePen

[Rodrigo]

Hi,

 

I've been looking at your codepen for a few minutes and I find it extremely convoluted and difficult to follow. This part for example:

function darkenExcept(id) {
  for (let i = 1; i <= 6; i++) {
    const selector = `#content-image-${i}`;
    if (selector === id) {
      gsap.to(selector, {
        opacity: 1,
        css: { filter: "brightness(100%)" },
        duration: 0.5
      });
    } else {
      gsap.to(selector, {
        opacity: 0.5,
        css: { filter: "brightness(50%)" },
        duration: 0.5
      });
    }
  }
}

// Add the animations to the timeline
for (let i = 1; i <= 6; i++) {
  tl1.add(() => darkenExcept(`#content-image-${i}`));
  tl1.to({}, { duration: 1 }); // Add a pause of 2 seconds
}

Could be done with just one loop and in a far simpler way and I believe this is the issue you have in your code. Keep in mind that the add method is adding a call to a function to the timeline, not the GSAP instance created in the darkenExcept function.

 

Based on the sequence you have right now I forked your codepen and removed everything except for the images:

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

 

Hopefully this helps.

Happy Tweening!

[AdMan123]

thank you that method makes much better sense than how I'd done it, really appreciate your help!