Using FramerMotion useTransform Animation while in viewport

Question

I am trying to set up some scroll-based animations using framer motion and react intersection observer. I would like to use the same animation for different sections on the same page as they scroll into view. I can get intersection-observer to work fine with some basic animation but I am not sure how to get it to work with useTransform. Here is a CodeSandBox which should explain better what I am after, and where I am going wrong. Any help would be very gratefully received.

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

Answer 1

Yes, it's good how are you doing, separating the components.

But here is example , clearly describing what you mostly need.

My suggestion, for components you messing some stuff for animation and transition. Try to use useCycle framer-motion element while useTransform. Example for 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>

Following this small example, you can use exactly the same animation but modify the duration of each component.

Also I recommend you to try AnimatePresence element.