Использование FramerMotion useTransform Animation во вьюпорте

Question

Я пытаюсь настроить анимацию на основе прокрутки, используя движение кадра и реагирующий на пересечение наблюдателя. Я хотел бы использовать одну и ту же анимацию для разных разделов на одной странице, когда они прокручиваются в поле зрения. Я могу заставить наблюдателя пересечения нормально работать с некоторой базовой анимацией, но я не уверен, как заставить его работать с useTransform. Вот CodeSandBox, который должен лучше объяснить, что мне нужно и где я ошибаюсь. Любая помощь будет принята с благодарностью.

https://codesandbox.io/s/motionintersect-25wz9?file=/src/App.js:449-504

Answer 1

Да, хорошо, как дела, по составляющим.

Но вот пример , четко описывающий, что вам больше всего нужно.

Мое предложение, для компонентов, для которых вы что-то путаете animation а также transition. Попробуйте использовать элемент useCycle framer -motion во время useTransform. Пример для Redbox:

      //define this animate const somewhere
const [animate, cycle] = useCycle(
  { scale: .5, opacity: 0 },
  { scale: 1.0, opacity: 1 }
 );

 //modify your component
 <Redbox
   ref={ref}
   animate={animate}
   transition={{ duration: 1 }}
  ></Redbox>

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

Также рекомендую попробовать элемент AnimatePresence .