Repeat portfolio animation with another plugin

Hey navindesigns,
Sorry for the late reply, thanks for the link to your pages. This is the css for the masonry animation, I modified it for the flip card entries.

.fc_card-container {
-webkit-animation: avia_msonry_showw 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
animation:         avia_msonry_showw 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); 
}

@-webkit-keyframes avia_msonry_showw {
  0%   { -webkit-transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1;  }
  100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@keyframes avia_msonry_showw {
  0%   { transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1;  }
  100% { transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;  }
}

The class .fc_card-container is your entry, the keyframe animation avia_msonry_showw is the same code as your masonry but I renamed it by adding an extra “w” to the name so you can adjust the code, if you wish.
In my test the animation works, but it is not exactly as the masonry page. Please try this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field, then clear your browser cache and any cache plugin, and check.
While researching this for you I also tested this animation that is a little different but you might like it, so please test this one also:

.fc_card-container {
  animation: growin 1s;
}
@keyframes growin {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

Please see these articles for tips on adjusting the css keyframes to change the animation:
CSS Animation for Beginners
Transitions & Animations

Here is one more to try:

.fc_card-container {
 transition: transform 0.8s;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: rotateX(90deg);
  animation: growin 1s;
  animation-fill-mode: forwards;
}

@keyframes growin {
  from {
  	transform: scale(0);
    transform: rotateX(90deg);
  }
  to {
  	transform: scale(1);
    transform: rotateX(360deg);
  }
}

Please let us know if any of these helps.

Best regards,
Mike

Hi,
Glad to hear you liked the second one, since I couldn’t make the flip box page behave like the masonry page, this css will make the masonry page behave like the flip box page.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry,.fc_card-container {
  animation: growin 1s !important;
  -webkit-animation: growin 1s !important;
}
@keyframes growin {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike