[英]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.我尝试将 react-intersection-observer 和 framer 运动相互结合使用,以便在使用 useInView 钩子查看组件时启动动画。 Although it works from about 1100px onwards it doesnt work for mobile views.
虽然它从大约 1100px 开始工作,但它不适用于移动视图。 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;
Had a similar issue.有一个类似的问题。 Turned out it was working, the initial x value was just too large.
结果证明它是有效的,初始的 x 值太大了。 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 }, }, };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.