On desktop I have text which floats in from an X axis, it is out of view until you scroll to it. On mobile I intend to change this to be a small "bump" on the Y axis.

I have tried multiple things which in my eyes should have worked, but there is no response.

This is my code at the minute.

const ParallaxHeader = ({
    text,
    className,
}) => {
    const { scrollY } = useScroll();
    const [initialPosition, setInitialPosition] = useState({x: 600, y: 0});
    const [animatePosition, setAnimatePosition] = useState({x: 0, y: 0});

    const opacity = useTransform(
        scrollY,
        [50, 300],
        [0, 1]);
    
    useEffect(() => {
        const updateAnimation = () => {
            if(window.innerWidth < 768) {
                setInitialPosition({ x: 0, y: 50 }); // Smaller offset for mobile
                setAnimatePosition({ x: 0, y: 0 });
            } else {
                setInitialPosition({ x: 600, y: 0 }); // Larger offset for desktop
                setAnimatePosition({ x: 0, y: 0 });
            }
        };

        updateAnimation();

        window.addEventListener('resize', updateAnimation);

        return () => window.removeEventListener('resize', updateAnimation);
    }, []);  

I have attempted creating a custom hook for a media query instead, however nothing seems to want to get it to register, it seems that the useEffect has no effect on the position at all, I can alter all the values and nothing will change.

The only thing that will alter the values is changing the initialPosition where it is declared with useState().