Как использовать несколько хуков useInView в одном компоненте реакции?

Я работаю над проектом реагирования и пытаюсь анимировать и показывать элементы div, как только они появляются в представлении. Я использую хук useInView из 'react-intersection-observer', чтобы определить, находится ли div в представлении, а затем запускаю анимацию, чтобы сделать div видимым.

Однако это не работает нормально, когда у меня есть два div в одном компоненте, т.е. как только первый div находится в представлении - анимируйте и покажите первый div, и когда вы прокручиваете дальше, как только второй div находится в вид - анимировать и показать второй div.

Любая помощь будет оценена по достоинству.

Вот код:

import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

function Container(props) {

    const { ref, inView } = useInView({
        threshold: 1
    });

    const { ref1, inView1 } = useInView({
        threshold: 1
    });

    return (
        <div>
            <motion.div ref={ref}>
                <motion.h1 
                   initial={{  x: -700, opacity: 0 }} 
                   animate={ inView ? { x: 0,  opacity: 1 } : ''} 
                   transition={{ duration: .75 }} >
                     Sample Title 1
                </motion.h1>
                <motion.p 
                   initial={{  x: 400, opacity: 0 }} 
                   animate={ inView ? { x: 0,  opacity: 1 } : ''} 
                   transition={{ delay: 0.8, duration: 1, ease: "easeOut" }} >
                     Sample Description 1
                </motion.p>
            </motion.div>

            <motion.div ref={ref1}>
                <motion.h1 
                   initial={{ opacity: 0 }} 
                   animate={ inView1 ? { opacity: 1 } : ''} 
                   transition={{ duration: .75 }} >
                     Sample Title 2
                </motion.h1>
                <motion.p
                   initial={{  x: 400, opacity: 0 }} 
                   animate={ inView1 ? { x: 0,  opacity: 1 } : ''} 
                   transition={{ delay: 0.8, duration: 1, ease: "easeOut" }} >
                     Sample Description 2
                </motion.p>
            </motion.div>         
        </div>
    );
}

export default Container;

reactjs framer-motion intersection-observer
person blindspot7    schedule 12.10.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, вы должны правильно связать анимацию с событиями пересечения

  1. Управление анимацией: https://www.framer.com/api/motion/utilities/#animate
  2. InVew из 'React-Intersection-Observer' с
const from = useMotionValue(0);

useEffect(
  () => {
    if (inView) {
      const controls = animate(x, 100, {
        type: "spring",
        stiffness: 2000,
      })

      return controls.stop
    }
  },
  [inView]
}
person Gleb Shaltaev    schedule 12.10.2020

arrow_upward
1
arrow_downward

в их документации говорится, что вы можете использовать несколько переменных с разрушением массива, а не с разрушением объекта, которое вы использовали в своем собственном случае.

Так что вы должны сделать это вместо этого.

const [ref, inView ] = useInView()
const [ref2, inView2 ] = useInView()
person tyro    schedule 02.07.2021