Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 27, 2022 at 12:49 pm #1366531
    Munford

    HI
    My client doesn’t like the fly-in animation on the masonry gallery, and the “disable’ option isn’t right.
    Is there a way to make a fade-in animation on load/scroll?
    I put a fade-in animation on a 1/1 column with the masonry (.fade-masonry) inside, but that only works if you are already scrolled to it.
    I have some codes but neither of them work:

    .fade-masonry .av-inner-masonry {
	opacity: 1;
	animation-name: fadeInOpacity!important; 
	animation-iteration-count: 1!important; 
	animation-timing-function: ease-in !important; 
	animation-duration: 2s!important; 
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*OR*/

.avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: fade-masonry 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
    animation: fade-masonry 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
}

    any ideas?
    thanks
    Nancy

    • This topic was modified 2 years, 2 months ago by Munford.
    • This topic was modified 2 years, 2 months ago by Munford.
    September 28, 2022 at 9:23 am #1366667
    Ismael

    Hey Munford,

    Thank you for the inquiry.

    You can actually override the default masonry animation with the following css code. Just add it in the Quick CSS field or in the style.css file. 

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

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

    This is the default avia_masonry_show animation in the css > shortcodes.css file. 

    /*pop up animation*/
@-webkit-keyframes avia_masonry_show {
  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_masonry_show {
  0%   { transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1;  }
  100% { transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;  }
}

    Best regards,
    Ismael

    September 28, 2022 at 10:11 am #1366676
    Munford

    Hi Ismael
    I tried that first code but still see the animation, and delaying until I scoll down the page.
    Is there a way to do a fade in on page load?
    thanks for your help
    Nancy

    September 29, 2022 at 4:21 pm #1366942
    Yigit

    Hi Nancy,

    Please add following code to bottom of Quick CSS field

    
.av-masonry-entry {
  visibility: visible;
  opacity: 1;
}

    and then set animation on your column element to fade in :)

    Best regards,
    Yigit

    September 30, 2022 at 4:53 pm #1367136
    Munford

    that looks better, thanks.
    Though I see a flickering white edge on the gallery when I hover over the images even though the background is set to black. (link in private content)

    I have another question:
    Is it possible to have the images in the masonry all the same height but are displayed with their original height and width ratio, instead of the same width?
    thanks for your help
    Nancy

    • This reply was modified 2 years, 2 months ago by Munford.
    October 4, 2022 at 9:06 am #1367517
    Ismael

    Hi,

    Thank you for the update.

    1.) Adding this css code should help with the flicker.

    .main_color .av-masonry-pagination, .main_color .av-masonry-pagination:hover, .main_color .av-masonry-outerimage-container {
    background-color: #000000;
}

    2.) This is not possible by default, unfortunately, A masonry gallery item can be either landscape or portrait, which depends on its size and aspect ratio (16:9). You have to set the Styling > Masonry Settings > Size Settings to Perfect Automatic Masonry for this to work.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.