Framer Motion/React- встроенные стили создателя кадра сохраняются после передачи нового варианта компоненту движения

Question

Работа над компонентом "Галерея", имеющим двух дочерних элементов, "GalleryImage", который анимируется с помощью Framer-Motion, когда переменная "inView" имеет значение true, которое предоставляется "useInView" из наблюдателя пересечения реакции. Моя проблема в том, что для этих изображений требуются совершенно разные анимации / начальные стили в зависимости от ширины окна (представленной переменной 'viewport'), но если страница загружается в размере 'рабочего стола' и изображения анимируют какое-то преобразование, но тогда размер окна изменяется на "мобильный", когда изображение не нужно преобразовывать вообще, стили из предыдущей анимации (или, скорее, исходного состояния) сохраняются. Как мне убрать эти встроенные стили при повторной визуализации?

Репо: https://github.com/qcaodigital/cocktail_curations.git

export function GalleryImage({ img, viewport, reverse }){
    const [ref, inView] = useInView({threshold: .25, triggerOnce: true})
    let variant;
    if(viewport === 'mobile') {
        variant = transitions.mobileTransition;
    } else if(!reverse && img.card || reverse && !img.card) {
        variant = transitions.panFromRight
    } else if(!reverse && !img.card || reverse && img.card) {
        variant = transitions.panFromLeft
    } 
    return (
        <motion.div
            ref={ref} 
            key={img.url} 
            className={`${styles.Gallery__imgContainer} ${img.card ? styles.hasCard : null}`}
            variants={variant}
            animate={inView ? 'animate' : 'initial'}
        >
            {img.card && (
            <figcaption>
                <p>{img.card.subheader}</p>
                <a href={img.card.href}>
                    <h3>{img.card.header}</h3>
                </a>
            </figcaption>
            )}
            <motion.img src={img.url} alt={img.alt}/>
        </motion.div>
    )
}

---- Файл переходов -----

const transitions = {};

transitions.mobileTransition = {
    initial: {
        opacity: 0
    },
    animate: {
        opacity: 1,
        transition: {
            duration: 1
        }
    }
}

transitions.panFromRight = {
    initial: {
        opacity: 0,
        x: 0,
        y: 0
    },
    animate: {
        opacity: 1,
        x: -15,
        y: 15,
        transition: {
            duration: 1,
            opacity: {
                duration: 1.5
            }
        }
    }
}

transitions.panFromLeft = {
    initial: {
        opacity: 0,
        x: 0,
        y: 0
    },
    animate: {
        opacity: 1,
        x: 15,
        y: -15,
        transition: {
            duration: 1,
            opacity: {
                duration: 1.5
            }
        },
    }
}

export default transitions;