Framer motion whileInView not animating correctly on mobile-CodePudding

When switching to mobile view for android based devices or using a chromium-based mobile emulator, animations will be in the completed state before you scroll down in view.
This issue does not appear on Safari or while in desktop view.

Example code used on the website that appears off screen when the component has mounted.

                <motion.div
                    variants={slideLeft(false)}
                    initial="initial"
                    whileInView="animate"
                    exit="exit"
                    transition={{ duration: 0.5 }}
                    viewport={{ once: true }}
                >

The animation variant used

/**
 * @param {boolean} cont default: true
 * @param {boolean} exit default: true
 * @param {string} customVal default: %
 * @return {import("framer-motion").MotionProps}
 */
const slideLeft = (cont = true, exit = true, customVal = "%") => {
    /**
     * @type {import("framer-motion").MotionProps}
     */
    const output = {
        initial: {
            x: `100${customVal}`,
        },
        animate: {
            x: 0,
        },
        exit: {
            x: `-100${customVal}`,
        },
    };
    if (!cont) output.exit = { x: `100${customVal}` };
    if (!exit) delete output.exit;
    return output;
};
export default slideLeft;

CodePudding user response：

The problem occurs when there is an overflow on the x-axis (right-hand side of the device).
Can be fixed by applying this CSS style. overflow-x: hidden;

html,
body,
#root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Prevents overflow on the x-axis */
    overflow-x: hidden;
}