0

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>
Emin
  • 149
  • 11

0 Answers0