Masonry Gallery load fade in

Hey fanlokbun,

Thank you for the inquiry.

Did you try the other suggestion in the thread? https://kriesi.at/support/topic/masonry-gallery-fade-in-on-load/#post-1366942

Best regards,
Ismael

Hi,

Where can we check the masonry element? Please provide the site URL in the private field. Adding the new avia_masonry_show animation should override the original css with the -webkit-transform: translate(…) property and allow the masonry items to fade in without the flip animation.

Best regards,
Ismael

Hi,

We removed the other css and keep the following code to override the default avia_masonry_show transition.

@-webkit-keyframes avia_masonry_show {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes avia_masonry_show {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

Please make sure to purge the cache before testing.

Best regards,
Ismael

Hi,

The images are fading in on our end. Did you install any lazy loading plugins? We recommend enabling pagination and try to reduce the number of images on the page. This should improve the loading speed.

You can also add this css code to adjust the transition duration:

.avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry,
.avia_mobile.avia_transform3d:not(.avia-mobile-no-animations) .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
	animation: avia_masonry_show 1.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
}

Default is 0.8s.

Best regards,
Ismael

Hi,

It is actually working, but the number of images affects the animation and loading speed. You can see it more clearly on the test page we created. (see private field)

Best regards,
Ismael

Hi,

The items fade in one at a time when we checked. If you really need to copy the animation from the other site, you may need to hire a freelance developer or contact Codeable.

— https://kriesi.at/contact/customization

Best regards,
Ismael

Hi,

Yes, it is working on the page above: https://streamable.com/jzv6u3

Best regards,
Ismael