Chnage background image of class with dissolve efect

[Amir-Ali-Basic]

Hey all, i have trouble to make background image change, i need animation with duration of 3s and delay of 3s , so 3s of image and than 3 s where will first image will go from opacity 1 to opacity 0 and at same time image 2 will start from opacity 0 to opacity  1. I think i am trying to do it wrong way but problem with my code is , i have white screen before images change

 

html

<div class="homepage" id="homepage"> </div>

css

.homepage {
    background-image: url("/assets/img/Homepage-cover-v5.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
}

js

function slider() {
    const SLIDER = gsap.timeline({
        default: {
            ease: "ease.in",
        },
    });
    SLIDER.to(".homepage", {
        delay: 3,
        ease: "ease.in",

        keyframes: [
            {
                duration: 1,
                opacity: 1,
                backgroundImage: "url(/assets/img/Homepage-cover-v5.png)",
            },
            {
                duration: 1,
                opacity: 0.5,
                backgroundImage: "url(/assets/img/Homepage-cover-v5.png)",
            },
            {
                duration: 1,
                opacity: 0.2,
                backgroundImage: "url(/assets/img/Homepage-cover-v5.png)",
            },
        ],
        keyframes: [
            {
                duration: 1,
                opacity: 0.5,
                backgroundImage: "url(/assets/img/pocetna3.png)",
            },
            {
                duration: 1,
                opacity: 0.5,
                backgroundImage: "url(/assets/img/pocetna3.png)",
            },
            {
                duration: 1,
                opacity: 1,
                backgroundImage: "url(/assets/img/pocetna3.png)",
            },
        ],
        backgroundImage: "url(/assets/img/pocetna3.png)",
    });
}
slider();

 

[Cassie]

Hey pal!

Could you pop a minimal demo together so we can see what's going on and fork it with suggestions?

[Amir-Ali-Basic]

yes i will now

[Amir-Ali-Basic]

See the Pen zYwBqjB by Amir-Ali-Basic (@Amir-Ali-Basic) on CodePen

[Amir-Ali-Basic]

See the Pen rNVEYVj by mikeK (@mikeK) on CodePen

need something like this but with background change

[Cassie]

Hmm - yeah, you can't really fade between different background images. A background image is a binary state - an element can either have a background image or not. It can't have a combination of background images. (unless you get into background blend modes I guess... but that's not going to be easy or performant)

You can however fade opacity of divs with different background images, or image tags? Would that work?

See the Pen eYWzzdv by svganimationworkshop (@svganimationworkshop) on CodePen

[Amir-Ali-Basic]

Yes i will do it this way, thank you so much