Kevin Powell - Community•6mo ago

Sliding animation not working

the animation not working as intended it is clipping sometimes the element(background) are img elements . the problem seems to happen on this block of js. all the variables are declared (including background.value ones)

async function MovePreviousBackground(Left) {
    const transitionPromise = () => {
        return new Promise(resolve => {
            ActiveBackground.addEventListener('transitionend', function handler() {
                resolve();
                ActiveBackground.removeEventListener('transitionend', handler);
            });
        });
    };

    const applyTransition = async (transform) => {
        ActiveBackground.style.transition = `0.5s ease`;
        ActiveBackground.style.transform = transform;
        await transitionPromise();
    };

    if (Left) {
        if (ActiveBackground.Value < 15) {
            await applyTransition(`translate(-100%, 0%)`);
            console.log("11");
        } else {
            await applyTransition(`translate(-100%, 0%)`);
            await applyTransition(`translate(-100%, -100%)`);
            await applyTransition(`translate(100%, -100%)`);
            await applyTransition(`translate(100%, 0%)`);
            console.log("10");
        }
    } else {
        if (ActiveBackground.Value < 15) {
            await applyTransition(`translate(100%, 0%)`);
            await applyTransition(`translate(100%, -100%)`);
            await applyTransition(`translate(-100%, -100%)`);
            await applyTransition(`translate(-100%, 0%)`);
            console.log("01");
        } else {
            await applyTransition(`translate(100%, 0%)`);
            console.log("00");
        }
    }
}

async function MovePreviousBackground(Left) {
    const transitionPromise = () => {
        return new Promise(resolve => {
            ActiveBackground.addEventListener('transitionend', function handler() {
                resolve();
                ActiveBackground.removeEventListener('transitionend', handler);
            });
        });
    };

    const applyTransition = async (transform) => {
        ActiveBackground.style.transition = `0.5s ease`;
        ActiveBackground.style.transform = transform;
        await transitionPromise();
    };

    if (Left) {
        if (ActiveBackground.Value < 15) {
            await applyTransition(`translate(-100%, 0%)`);
            console.log("11");
        } else {
            await applyTransition(`translate(-100%, 0%)`);
            await applyTransition(`translate(-100%, -100%)`);
            await applyTransition(`translate(100%, -100%)`);
            await applyTransition(`translate(100%, 0%)`);
            console.log("10");
        }
    } else {
        if (ActiveBackground.Value < 15) {
            await applyTransition(`translate(100%, 0%)`);
            await applyTransition(`translate(100%, -100%)`);
            await applyTransition(`translate(-100%, -100%)`);
            await applyTransition(`translate(-100%, 0%)`);
            console.log("01");
        } else {
            await applyTransition(`translate(100%, 0%)`);
            console.log("00");
        }
    }
}

also give a review to the design if you will

2 Replies

Jochem•6mo ago

it'll be hard for people to help without being able to see the site, or at least a recording of what you mean by "clipping". Do you have a live version to share where people can see the glitch happen in their own browser?

sheikh•6mo ago

it's solved thanks,

Gaming

Programming

Sliding animation not working