Slider Fade In Issue

Design help Animations & Interactions
1

Hey All,

I’m having some funky fade-in interaction issue with my slider in the second section. The design intent is to have the logos stay visible and the cards background and information fade in as a user scrolls into this section. Currently the fade-in interaction works perfectly for the cards that are in view but not for the cards that haven’t rotated into view within the slider. They come in blank. I’m not sure how to fix this. If anyone has run into this issue or have a workaround for this please let me know.

Here is a screen capture of the cards without BG:

Cards-withoutBG
Cards-withoutBG1315×797 189 KB

Here are the cards in view:

Cards-InView
Cards-InView1455×759 290 KB

Here is an example of the cards sliding into view but the backgrounds missing:

card-missingbg
card-missingbg1280×694 498 KB

Here is a link to the site:
https://preview.webflow.com/preview/hype-asia?utm_medium=preview_link&utm_source=designer&utm_content=hype-asia&preview=c886d512ab12c5cefce9c6de914a5ca0

2

hmn
Sorted it, thanks to your efforts in explaining.
Took me a while to see what was going on but its your interactions.
Your Casestudy-FadeGOAT-IN’s some of them have background transparent set as default.
Change it to colour you want and bingo.

If this is correct, tick the heart and solution, thanks me and keeps the forum tidy.

4

The design intent is to have the default interaction be transparent then fade in to 100% color. Sorry my explanation maybe confusing.

5

Well in that case only the initial load display is working.
I will have another look but my guess is it probably happens on initial element load and no when slider scrolls the slides into view.

6

Tried lots of things, moving slides, deleting and creating.
However nothing works.
I have however proven my theory. Change duration from 0.5 to 10 seconds and you will see the issue when sliding. They are all doing the effect at the same time.

1 Like