CODEWITHSUNDEEP
javascriptreactjstailwind-cssframer-motionreact-intersection-observer
Caolan Fanning
Caolan Fanning

Reputation: 21

react-intersection-observer not working mobile view

Im trying to use react-intersection-observer and framer motion in conjunction with each other in order to start animation when the component is in view using the useInView hook. Although it works from about 1100px onwards it doesnt work for mobile views. This is my code below

import Image from "next/image";
import { useRouter } from "next/router";
import { motion, useAnimation } from "framer-motion";

import profile from "../images/profile.jpg";
import { useInView } from "react-intersection-observer";
import { useEffect } from "react";
const HeroSection = () => {
    const router = useRouter();
    const { ref, inView } = useInView({
        threshold: 0.2,
    });
    const animation = useAnimation();

    const heroAnimation = {
        hide: {
            x: -1000,
            opacity: 0,
        },
        show: {
            x: 0,
            opacity: [0.1, 1],
            transition: { delay: 0.3, duration: 0.75, type: "spring", bounce: 0.2 },
        },
    };

    useEffect(() => {
        if (!inView) {
            animation.start("hide");
        }
        if (inView) {
            animation.start("show");
        }
    }, [inView, animation]);

    console.log(inView);

    return (
        <motion.div
            animate={animation}
            variants={heroAnimation}
            ref={ref}
            className='space-y-10 px-4 flex flex-col md:grid md:grid-cols-2 md:py-12 bg-white pb-[50px]'>
            <div className='flex flex-col justify-center items-center space-y-10'>
                <h1 className='text-5xl mt-[50px] md:mt-0'>Welcome!</h1>
                <p className='text-center max-w-[400px] lg:max-w-[650px]'> website intro
                </p>
                <button
                    onClick={() => router.push("/about")}
                    className='bg-gray-200 shadow-md text-gray-700 font-bold p-3 lg:p-4 rounded-lg active:bg-gray-300 active:shadow-lg hover:scale-105 transition duration-200 ease-in-out'>
                    READ MORE..
                </button>
            </div>

            <div className='rounded-lg relative m-auto h-[350px] w-[280px] md:h-[400px] md:w-[320px] lg:h-[500px] lg:w-[400px]'>
                <Image
                    className='rounded-lg'
                    objectFit='contain'
                    layout='fill'
                    src={profile}
                    alt='profile'
                />
            </div>
        </motion.div>
    );
};

export default HeroSection;

Upvotes: 0

Views: 1637

Answers (1)

Abbas Salami
Abbas Salami

Reputation: 1

Had a similar issue. Turned out it was working, the initial x value was just too large. This should work fine.

const heroAnimation = {
        hide: {
            x: -50,
            opacity: 0,
        },
        show: {
            x: 0,
            opacity: [0.1, 1],
            transition: { delay: 0.3, duration: 0.75, type: "spring", bounce: 0.2 },
        },
    };

Upvotes: 0

Related Questions