2

I'm using React Router in my project and have a list of album cards on the "Overview" page, and the same list of album cards on the "Albums" page. The only difference is the albums page is slightly wider.

I'd like the cards to transition to their new place/size as someone changes the route, so I've wrapped my router in <AnimateSharedLayout type="crossfade"> and given each card the same layoutId.

Now, it works, but I have a couple of issues and was wondering whether they can be fixed (I'm sure I'm just overlooking something obvious).

I've put together a cut-down example here: https://codesandbox.io/s/framer-animatesharedlayout-5kdfr (if you click between "Overview" and "Albums", it should perform the transition).

  • Why might crossfade not be working correctly? Instead, the cards immediately jump to the end component (I guess it's ignoring my crossfade in the AnimateSharedLayout component and using switch instead? Why would it do that?)
  • Is there a way to have the inner components of the card somehow scale inversely? (Similar to "Correcting child components" in Matt's post at https://www.framer.com/blog/posts/magic-motion/) For example, you can see the text squishes during the transition, even though it's the same size at the start and the end.

Thanks!

dvyio
  • 329
  • 4
  • 18

0 Answers0