CODEWITHSUNDEEP
javascriptcssreactjsframer-motion
David
David

Reputation: 403

Why is this layout animation not working?

The animation that I tried to replicate

timestamp for the code: 34:15-34:45

timestamp for the animation demonstration: 34:47-34:54

It is easier to visualize through the link, but bascially the filtered items move to the destination instead of simply filtering

css properties used in the video

.popularMovie{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-column-gap: 1rem;
  grid-row-gap: 2rem;
}

The animation in the video basically just used only 2 motion.div with 2 layout attribute, the css used is also copied but the effect is not reproducable below is a code sandbox example that I made,

Minimal reproducible example

Upvotes: 1

Views: 726

Answers (1)

Momtntu
Momtntu

Reputation: 26

The answer is:

  1. Do not miss the key property of the inner component:

<motion.div key={item.id} layout className="box">

  1. Make sure that key property is unique (e.g. DO NOT use something like filtered.map((item, i) => <h2 key={i}/>))

Upvotes: 1

Related Questions