尝试使用 Framer-motion motion.div 为轮播设置动画

Question

I am trying to animate a carousel transition with Framer-motion motion.div, I am doing some reading but haven't made much progress as this is my first time using animations. If anyone could point my in the right direction I would be very grateful, I basically have a piece of state linked to my pagination that sets the scroll direction on the animation to either "left" or "right". i really just need to figure out a way to set the enter and exit animation on my motion.div using this right or left from state. I could change the state to have any value really.

I guess what Im confused about, is i'm currently showing the cards in my table as a Stack of items, and when I paginate, the stack changes, the cards currently shown change to the next set in the data object. I suppose Im not understanding how to animate the entrance and exit of one div as its changing? Im continuing to read about animations but am in a real hurry to get this done.

heres what I put together:

  <AnimatePresence exitBeforeEnter>
          <motion.div animate={{ x: { ???? } }}
            style={{ position: 'absolute' }}>
              <HStack spacing={6}>
                {data.objectives.edges.map(e => (
                  <ObjectiveCard
                    objective={e.node}
                    key={e.node.id}
                    completeObjective={completeObjective}
                  />
                ))}
              </HStack>
          </motion.div> 
        </AnimatePresence>