Slider with Flash of Unstyled Content

[dancingrobots]

Hello,

I am putting together a slider that uses GSAP to fade in each slide's corresponding banner text. On slide change, the active slide gets a new class addition which is what I'm targeting with GSAP.

 

I've set this div's initial visibility to hidden and use autoAlpha to fade in the content. But I get a flash of unstyled content when a new slide comes into the viewport. Am I misusing fromTo? I would appreciate it if you could point me in the right direction.

 

Please see my timeline code below and the linked codepen demo.

const tl = gsap.timeline({ defaults: { duration: 0.75 } });

tl.fromTo(
      ".is-active .fade-in",      { opacity: 0, y: 20, autoAlpha: 0},    { opacity: 1, y: 0, autoAlpha: 1}

);

 

Thanks.

See the Pen 39cb345349689c3fe98b132c4c772c2c by lvl12sealclubber (@lvl12sealclubber) on CodePen

[GreenSock]

I'm not at all familiar with Splade, sorry. I did notice a few things:

1. I believe that it's not actually triggering your GSAP code until the slide is fully on-screen in its resting position, so it'd make sense that it's behaving that way. You probably need to find out from Splade how to tap into their API to correct that and set things up BEFORE the element comes into view. Perhaps you should set up your CSS so that things are in their "before" state.
2. You're animating "opacity" and "autoAlpha" which is totally redundant. "autoAlpha" does BOTH opacity and visibility
3. I noticed you have a CSS transition declared - be very careful about that. It may be fine in your context, but I wanted to point out that you should never use a CSS transition on anything that GSAP is animating. It'll not only look weird but it'll hurt performance. 

Thanks for being a Club member!

[dancingrobots]

Thanks for the feedback. I'll check the slider API.