[BUG] positionTransition animation delayed when children exit about motion HOT 8 CLOSED

I’m gonna look into this as part of Framer Motion 2 and AnimateSharedLayout

from motion.

@InventingWithMonster Just following up — I've updated to to 2.0 and notice this staggered exit/smooth entrance issue is still around. Is it something you're still looking into, or is it fixed and I'm just not implementing it properly?

from motion.

Edit: Ah I misunderstood. Yes I see the problem. The exiting children have to be physically removed from the DOM before the surrounding nodes can measure their new position.

I'm going to mark this as wontfix for now I'm afraid. I had this feature in Pose and it's responsible for the majority of the Popmotion issues board. The problem with doing it this way is you have to "pop out" the elements from their flow using position: absolute and manually setting their size and measurements. This is actually something you could do yourself via the style tag but after trying to implement a general solution I don't personally believe there's a way of achieving this that isn't bespoke to a specific design.

Original comment:

I'm not sure I understand exactly the problem here, maybe the snapping of the parent is confusing things.

If you keep the parent static between renders by changing body to:

  justify-content: flex-start;
  align-items: flex-start;

Does the bug as you perceive it still occur?

The reason for this is positionTransition works when the offset of a component relative to its nearest-positioned parent changes as the result of a render. But if the parent itself is also moving then that also needs a positionTransition of its own.

However this is complicated with AnimatePresence because the parent component only really moves relative to the document once the exiting children are removed. The re-render to do this only happens locally within AnimatePresence. So the parent isn't informed.

We are talking about a component that will allow AnimatePresence to communicate changes within it back up the tree. So something along the lines of:

<LayoutContext>
  <motion.ul positionTransition>
    <AnimatePresence>
          <motion.li
            animate={{ opacity: 1 }}
            initial={{ opacity: 0 }}
            exit={{ opacity: 0 }}
            key={background}
            positionTransition={spring}
          />
    </AnimatePresence>
  </motion.ul>
</LayoutContext>

Will animate the parent smoothly even when children are removed.

from motion.

The problem with doing it this way is you have to "pop out" the elements from their flow using position: absolute and manually setting their size and measurements. This is actually something you could do yourself via the style tag but after trying to implement a general solution I don't personally believe there's a way of achieving this that isn't bespoke to a specific design.

@InventingWithMonster sorry to bring up an old issue but wondering if you could elaborate on this? I'm facing the same issue the OP was, and if there's a way to work around it I'd love to give it a try. I'm just not sure I understand what needs to be done to achieve the desired effect based on your description.

from motion.

@InventingWithMonster That would be phenomenal! Please remind me to send you a cake if this makes it into the release! 😄

from motion.

Any news on this issue?

from motion.

Hi, @colepeters.
Did you find a solution?
Because looks like the issue closed but I also get this problem

from motion.

Also getting this problem.

from motion.