I would like to use Framer motion in my component where I depend on react-semantic-ui library. I can have animation when component mounts but when I would like to have animation on each child in my map, I have a problem with styles because I have to wrap my elements with <motion.div>
and that destroys everything. How would be your solution to come around this problem?
So far this is the code I have and needs to be changed to keep the styles from semantic ui cards.
<Card.Group itemsPerRow={itemsPerRow} centered>
{data.map((e) => {
const dateToFormat = e.created_at;
const userIndex = data.indexOf(e);
return (
<motion.div
variants={item}
>
<Card as="motion.div" raised>
<Image
src={`${images[userIndex]}`}
wrapped
size="large"
ui={false}
onClick={() => {
const index = data.indexOf(e);
clickHandler(index);
}}
/>
<Card.Content>
<Card.Header></Card.Header>
<Card.Meta>
<span className="date">{e.name}</span>
</Card.Meta>
<Card.Description>{e.description}</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="calendar alternate outline" />
Created: <Moment date={dateToFormat} fromNow />
</a>
</Card.Content>
</Card>
</motion.div>
);
})}
{isClicked ? (
<Portfolio index={index} parentCallback={callbackFunction} />
) : null}
</Card.Group>