Observer - Fix Background Color

[KwabenaOwusu]

Hi All,

I want to thank you in advance for taking your time to read.

I am new to GSAP and and somehow intermediate CSS/JS guy.

 

All day I've been trying to find out what I am missing.

Issue: the background color (body) becomes visible during the animation. In your original pen as well as another one I studied, the background color of the body is not visible during the transition. This is what I am trying to achieve.

 

I have set body background-color to make it even more visible.

 

This is the original pen (using background images): 

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

 

This is a copy I studied as well: 

See the Pen mdXbLOJ by Chybosky (@Chybosky) on CodePen

 

My pen: 

See the Pen ZEmgaYB by KwabenaOwusu (@KwabenaOwusu) on CodePen

[Cassie]

Heya!

 

You're telling the current section to hide on line 24.

 

gsap.set(sections[currentIndex], { zIndex: 0 });
tl.set(sections[currentIndex], { autoAlpha: 0 });

Here, I've tweaked it so it spins instead so you can see where the issue is

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

[KwabenaOwusu]

Thanks very much for pointing me in the right direction, Cassie 😊

I will try to find a solution.

 

Regards